关于javascript：HTML5 canvas drawImage与一个角度


HTML5 canvas drawImage with at an angle

我正在实验中的动画，但无法弄清楚如何以一定角度绘制图像。 所需的效果是照常绘制几张图像，其中一张图像缓慢旋转。 (如果有任何区别，此图像将不在屏幕中央)。

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

假设图像指向HTMLImageElement对象。

1
2
3
4
5
6
7
8
9
10
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坐标是画布上图像的中心。

相关讨论

我编写了一个函数(基于Jakub的答案)，该函数允许用户根据自定义旋转点中的自定义旋转在X，Y位置绘制图像：

1
2
3
4
5
6
7
function rotateAndPaintImage ( context, image, angleInRad , positionX, positionY, axisX, axisY ) {
  context.translate( positionX, positionY );
  context.rotate( angleInRad );
  context.drawImage( image, -axisX, -axisY );
  context.rotate( -angleInRad );
  context.translate( -positionX, -positionY );
}

然后您可以这样称呼它：

1
2
3
4
5
6
7
var TO_RADIANS = Math.PI/180;
ctx = document.getElementById("canvasDiv").getContext("2d");
var imgSprite = new Image();
imgSprite.src ="img/sprite.png";

// rotate 45o image"imgSprite", based on its rotation axis located at x=20,y=30 and draw it on context"ctx" of the canvas on coordinates x=200,y=100
rotateAndPaintImage ( ctx, imgSprite, 45*TO_RADIANS, 200, 100, 20, 30 );

有趣的是，第一个解决方案适用于如此多的人，但没有得到我需要的结果。
最后，我必须这样做：

1
2
3
4
5
6
ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();

其中(positionX, positionY)是希望图像位于画布上的坐标，而(x, y)是希望图像旋转的图像上的点。