javascript - 具有一定 Angular HTML5 Canvas drawImage

Question

我正在 <canvas> 中试验动画并且不知道如何以一定 Angular 绘制图像。期望的效果是像往常一样绘制几张图像，其中一张图像缓慢旋转。 (这张图片不在屏幕中央，如果这有什么不同的话)。

Answer 1

您需要在绘制要旋转的图像之前修改变换矩阵。

假设图像指向一个 HTMLImageElement 对象。

var x = canvas.width / 2;
var y = canvas.height / 2;
var width = image.width;
var height = image.height;

context.translate(x, y);
context.rotate(angleInRadians);
context.drawImage(image, -width / 2, -height / 2, width, height);
context.rotate(-angleInRadians);
context.translate(-x, -y);

x, y 坐标是 Canvas 上图像的中心。