具有角度的HTML5畫布drawImage

Question

我正在<canvas>試驗動畫，但無法確定如何以一定角度繪制圖像。 期望的效果是像往常一樣繪制的一些圖像，其中一個圖像緩慢旋轉。 （如果這有任何區別，則此圖像不在屏幕的中心）。

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坐標是畫布上圖像的中心。

Answer 2

我編寫了一個函數（基於Jakub的答案），允許用戶根據自定義旋轉點中的自定義旋轉在X，Y位置繪制圖像：

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 );
}

然后你可以像這樣調用它：

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

// rotate 45º 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 );

Answer 3

有趣的是，第一個解決方案適用於這么多人，它沒有給出我需要的結果。 最后我不得不這樣做：

ctx.save();
ctx.translate(positionX, positionY);
ctx.rotate(angle);
ctx.translate(-x,-y);
ctx.drawImage(image,0,0);
ctx.restore();

其中(positionX, positionY)是我希望圖像位於畫布上的坐標，而(x, y)是圖像上我希望圖像旋轉的點。