Можностей, предоставляемых веб-разработчикам

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)
, то есть убираю с экрана все содержимое.
Вот и все. Вся анимация. Примерно то же самое, что рисовать мультик на листах блокнота.

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу: