182 • Глава 5
Для того чтобы добавить примеру изящества, я заставлю лицо Брюса не только скакать по
экрану, но и вращаться. Для этого мне нужно будет периодически
поворачивать холст, как
мы уже делали ранее в этой главе.
Поскольку лицо Брюса должно вращаться, лучше сделать это с помощью
еще одного холста,
чтобы не засорять вращениями и трансляцией главный холст. Таким образом, я разобью
одну сложную задачу на две простых: фотография Брюса будет вращаться на одном холсте,
а на втором я буду вычислять положение изображения и выводить его на экран.
var ctx = document.querySelector('canvas').
¬ getContext(
"2d"),
ballctx,
x = 100, //
произвольная начальная точка
y = 50,
d x = 2,
d y = 4,
width = ctx.canvas.width,
height = ctx.canvas.height;
// загрузка изображения
ballImg = document.createElement('img');
ballImg.src = 'bruce-ball.png';
// после загрузки изображение может начинать
¬ прыгать
ballImg.onload = function () {
var ball = document.createElement('canvas');
ball.height = 50;
ball.width = 50;
ballctx = ball.getContext('2d');
// транслируем центр для правильного вращения
ballctx.translate(25, 25);
setInterval(draw, 10);
};
function draw() {
ctx.clearRect(0, 0, width, height);
ballctx.rotate(Math.PI/180*5); // 5
градусов
// рисуем в положении 0,0
ballctx.drawImage(ballImg, 0, 0,
¬ ballImg.width,
¬ ballImg.height, -25, -25, 50, 50);
// копирование источника после поворота
ctx.drawImage(ballctx.canvas, x, y);
if (x + dx > width || x + dx < 0)
Холст
• 183
dx = -dx;
if (y + dy > height || y + dy < 0)
dy = -dy;
x += dx;
y += dy;
}
Все действие происходит в функции
draw
, но только после того, как я заканчиваю под-
готовку.
Подготовка заключается в том, что я динамически создаю холст с мячиком, но
не помещаю его в DOM. Затем этот холст транслируется, поэтому лицо Брюса вращается
в центре холста. Я все так же могу использовать контекст 2D этого «незакрепленного»
холста, и я явно задаю высоту и ширину холста (в противном случае автоматически уста-
навливается размер 300 × 150 пикселов).
Функция
draw
выполняется каждую сотую долю секунды (каждые 10 миллисекунд), по-
стоянно
увеличивая позиции
x
и
y
и перерисовывая холст с
мячиком на главном холсте.
Разумеется, перед тем как перерисовывать прыгающий мячик, я очищаю главный холст
методом
ctx.clearRect(0,
0,
width,
height)
, то есть убираю с экрана все содержимое.
Вот и все. Вся анимация. Примерно то же самое, что рисовать мультик на листах блокнота.
Достарыңызбен бөлісу: