Среда программирования:
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; } });
Картинки, использованные в уроке:
