Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Пиривет сайт с работой закладчиком Работа курьером Значение финансов в повседневной жизни известно каждому, но что делать, если зарплата на постоянной работе невелика или ее вообще нет? Если у Вас нет профессии или возникли иные сложности, то...
Модные тренды медицинской одежды - новая эра стиля и комфорта в 2024 году https://fkmed.r... C нами Вы убедитесь: качественная, комфортная и модная медицинская одежда существует! В каталоге на сайте представлена медицинская одежда для врачей и...
14 070 руб https://www.eco... 38 900 руб https://www.eco... и выберите из списка ниже: Купить в 1 клик https://www.eco... По типу двигателя снегоотбрасыватель может быть: Купить в 1 клик https://www.eco...
Все изделия хорошо сидят на фигуре и отличаются высокой степенью комфортности https://fkmed.r... Комбинированные ткани с применением хлопка и синтетики - это оптимальный вариант для пошива формы https://fkmed.r... Специальная пропитка...
53 990 руб https://www.eco... Экономия 4 160 руб https://www.eco... Купить в 1 клик https://www.eco... Главными элементами устройства являются двигатель, металлический или пластиковый корпус и лопасти для уборки снега https://www.eco... Тип...

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Среда программирования: 
HTML 5 + JavaScript

Изображения.

Рисовать непросто. Да, мы умеем уже работать с линиями и кривыми, создавать из них фигуры, но результат вряд ли будет похож на что-то подобное шедевру эпохи Возрождения. Однако решение есть: просто вставить изображение в нашу работу!

a = new Image();
a.src = 'cat1.jpg' ;
wait (function() {
c.drawImage(a,100,50);
});


Рассмотрим каждую строку кода по порядку.
a = new Image();
Тут программа создает новое изображение и дает ему имя «а». То есть изображение «а» - это та картинка, которую мы после изобразим на нашем холсте.
a.src = 'cat1.jpg' ;
Теперь мы говорим какое именно изображение хотим использовать. В одинарных кавычках можно указать как и адрес в Интернете, так и путь к файлу. А лучше поместить картинку к html файлу и указать лишь имя и расширение.
wait (function() {
});

Мы должны немного подождать. Компьютеру нужно время, чтобы найти картинку в Интернете и загрузить её на наш холст. Так что мы должны дать ему его, прежде чем зададим команду отрисовки.
c.drawImage(a,100,50);
Теперь же мы говорим именно нарисовать это изображение. В круглых скобках указываем имя изображения, а так же координаты расположения по х и у.
Так же мы можем без труда загрузить еще картинок и расположить их где пожелаем:
a = new Image();
a.src = 'cat1.jpg' ;
b = new Image();
b.src = 'cat2.png' ;
wait (function() {
c.drawImage(a,100,50);
c.drawImage(b,0,200);
})

Аффинные преобразования.

С помощью аффинных преобразований можно создавать довольно крутые графические эффекты, что ляжет на руку при 3d анимации и т.п.
И так, что мы можем делать с изображениями?
1)Scale
c.scale(х,у);
Мы можем растянуть наше изображение.

a = new Image();
a.src = 'cat1.jpg' ;
wait (function() {
c.scale(1,2);
c.drawImage(a,100,50);
});


За масштаб изображения отвечает команда «c.scale». Первый её параметр отвечает за масштабирование по х, второй по у.
c.scale(0.5,2);

2) Translate
c.translate (х,у);
С этой функцией мы можем перемещать наше изображение по холсту.
a = new Image();
a.src = 'cat1.jpg' ;
wait (function() {
c.translate (-200,-50);
c.drawImage(a,200,50);
});

Например, тут картинка смещена в начало. Мы прибавляем значения к тем, что заданы при отрисовке изображения.

3)Rotate
c.rotate(d * Math.PI / 180);
Сия команда поворачивает изображение. Мы лишь должны указать, на сколько градусов.
a = new Image();
a.src = 'cat1.jpg' ;
wait (function() {
c.rotate(30 * Math.PI / 180);
c.drawImage(a,200,50);
});

И так, теперь соберем все преобразования вместе.

a = new Image();
a.src = 'Bird.png' ;
wait (function() {
c.drawImage(a,1,1);
});


База есть. Теперь сделаем птицу поменьше.
a = new Image();
a.src = 'Bird.png'' ;
wait (function() {
c.scale(0.1,0.1);
c.drawImage(a,1,1);
});


Отлично. Давайте перенесем её подальше от начала координат.
a = new Image();
a.src = 'Bird.png' ;
wait (function() {
c.scale(0.1,0.1);
c.translate (2000,500);
c.drawImage(a,1,1);
});


Так как мы изменили масштаб нашей картинки, то и разбиение осей стало поменялось, что нужно учитывать. Именно потому числа смещения довольно внушительны.
Что же, применим последний метод. Поворот.
a = new Image();
a.src = 'Bird.png' ;
wait (function() {
c.scale(0.1,0.1);
c.translate (2000,500);
c.rotate(20 * Math.PI / 180);
c.drawImage(a,1,1);
});


Теперь птица словно летит к началу координат.

Простая анимация.

Начнем с базы. Вот наш старый код, что отображает картинку на экране.

a = new Image();
a.src = 'cat3.png' ;
wait (function() {
c.drawImage(a,200,50);
});


Прежде всего мы должны сменить команду «wait» на «repeat». Отлично. Теперь программа не просто отобразила наше изображение. Она повторяет отрисовку раз за разом. Однако наш кот остается на одной позиции. Что ж, слегка подправим.
a = new Image();
a.src = 'cat3.png' ;
x=50;
repeat (function() {
c.drawImage(a,x,50);
x=x-1;
});

Зададим первоначальную позицию через х, а в цикле укажем то, как он будет меняться. В моем случае он будет приближаться к нулю.

Отлично. Правда теперь кот скрылся, оставив после себя силуэтный след. Добавим команду, что очищает экран от предыдущего «кадра».
a = new Image();
a.src = 'cat3.png' ;
x=50;
repeat (function() {
c.clear();
c.drawImage(a,x,50);
x=x-1;
});


Великолепно. Кот снова скрылся, но уже без шлейфа.
И все же идеально будет лишь тогда, когда кот придет и останется с нами.
Мы добавим переменную «time» и теперь переменная х будет изменяться в удовлетворяющих нас пределах.
a = new Image();
a.src = 'cat3.png' ;
x=500;
time=1;
repeat (function() {
c.clear();
c.drawImage(a,x,50);
time=time+1;
if(time > 1 && time < 500){
x=x-1;
}
});


Картинки, использованные в уроке: