Поворот и перемещение изображения в элементе canvas?

Question

Я бы хотел переместить и повернуть изображение шара в элементе. Мяч 68х68, холст 300х200. Мяч движется вдоль осей x и y, изменяя скорость x и y при попадании в стену - все это работает. Я просто не могу понять, как сделать вращение поверх движения.

Моя функция draw (), которую я вызываю через window.setInterval каждые 30 мс, выглядит примерно так:

  var draw = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.rotate(ball_radians);
    ctx.drawImage(ball_img, x, y);
    ctx.restore();

    // calculate new x, y, and ball_radians
  }

Это заставляет мяч летать по экрану, так что я явно что-то делаю не так. Чего мне не хватает?

Answer 1

1. Переведите контекст в точку на холсте, вокруг которой должен вращаться объект.
2. Поворот контекста.
3. Либо:
   • Переведите контекст на отрицательное смещение внутри объекта для центра вращения, а затем нарисуйте объект на 0,0 или
   • Нарисуйте изображение, используя отрицательное смещение внутри объекта для центра вращения.

например.

ctx.save();
ctx.translate( canvasLocX, canvasLocY );
ctx.rotate( ballRotationInRadians );
ctx.drawImage( ball_img, -ballCenterX, -ballCenterY );
ctx.restore();

Обратите внимание, что если вам нужна абсолютная скорость, вместо сохранения и восстановления холста (обработки многих свойств, которые вы не изменили), вы можете просто отменить свою работу:

ctx.translate( canvasLocX, canvasLocY );
ctx.rotate( ballRotationInRadians );
ctx.drawImage( ball_img, -ballCenterX, -ballCenterY );
ctx.rotate( -ballRotationInRadians );
ctx.translate( -canvasLocX, -canvasLocY );

Предыдущий бит преждевременной оптимизации был слепо отобран у кого-то другого; Я лично не проверял, чтобы убедиться, что это правильно.

Редактировать : Я добавил макет рабочего примера этого здесь: http://phrogz.net/tmp/canvas_beachball.html