HTML5畫布drawImage在一個角度

我正在試驗動畫<canvas>並且無法確定如何以一個角度繪製圖像。所需的效果是像往常一樣繪製一些圖像，一個圖像緩慢旋轉。（這個圖像不在屏幕的中心，如果這有什麼區別的話）。HTML5畫布drawImage在一個角度

2010-09-25 Greg

您需要在繪製要旋轉的圖像之前修改轉換矩陣。

假設圖像指向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座標是畫布上圖像的中心。

來源

2010-09-25 10:48:22

而不是在最後旋轉/翻譯，你可以在做轉換和繪圖之前和之後做一個'context.save（）'和'context.restore（）'。 – 2010-09-25 15:53:30

+24

雖然使用save（）/ restore（）看起來更清晰，但效率會更低。引擎將不得不存儲/恢復所有的上下文屬性，而不僅僅是我們在這裏操作的那些屬性。這在敏感的代碼路徑中很重要。 – 2010-09-25 17:39:28

另一個例子，看到這個（重複）的問題和答案：[使用HTML5畫布錶盤 - 旋轉關於任意點]（http://stackoverflow.com/questions/4649836/dial-of-a-gauge-using -html5帆布 - 轉 - 約-任意點/ 4650102＃4650102）。 – Phrogz 2011-01-10 20:52:32

我寫了一個功能（基於的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);

來源

2014-06-05 09:56:35 Yaume

有意思的是，第一個解決方案爲這麼多的人，它並沒有給我所需要的結果。最後，我不得不這樣做：

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

其中(positionX, positionY)是我想要的形象被定位在和(x, y)就是我想要的圖像旋轉圖像上的點在畫布上的座標。

來源

2017-10-24 23:48:01 PetrolHead

HTML5畫布drawImage在一個角度

回答

相關問題