使用HTML5畫布 - 旋轉關於任意點的圖像

Question

旋轉半圓形（北半球）圖像頂部的錶盤作爲背景。 範圍可以是0-180度。 輸入到執行畫布轉換的方法時，錶盤將旋轉並停止在匹配值上。 這是我的基礎上幫助和樣品通過phrogz

Answer 1

在一般情況下，你想要做什麼傳遞嘗試是：

1. 改造背景下的點在畫布上的對象應該圍繞。
2. 旋轉上下文。
3. 根據旋轉中心的對象內的負偏移量轉換上下文。
4. 在0,0處繪製對象。

在代碼：

ctx.save(); 
ctx.translate(canvasRotationCenterX, canvasRotationCenterY); 
ctx.rotate(rotationAmountInRadians); 
ctx.translate(-objectRotationCenterX, -objectRotationCenterY); 
ctx.drawImage(myImageOrCanvas, 0, 0); 
ctx.restore(); 

這裏顯示了動作中的一個working example。 （對於旋轉的數學只是實驗砍死找到一個擺動量，並在適合快速-草圖計錶盤弧度偏移。）

由於可能是顯而易見的，你可以在上面的步驟＃3替換translate通話抵消drawImage()電話。例如：

ctx.drawImage(myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY); 

當您在同一位置繪製多個對象時，建議使用上下文轉換。