查找畫布旋轉

Question

0比0，-70這個座標後：

ctx.strokeStyle = "red"; 
ctx.lineWidth = 2; 
ctx.rotate(Math.PI/-10;); 
ctx.beginPath(); 
ctx.moveTo(0,0); 
ctx.lineTo(0,-70); 
ctx.stroke(); 

，我還可以通過 'PI/-10' 旋轉的是，和工程。

如何在使用旋轉後得到此x，y點？

Answer 1

您的x和y點仍然是0和-70，因爲它們是相對於平移（旋轉）。這基本上意味着你需要對矩陣進行「逆向工程」，以獲得您在畫布上看到的最終位置。

如果要計算行肚裏70個像素，在-10度，你可以使用簡單的三角自己而應計算（這是比基會有點倒退更容易）。

您可以使用這樣一個函數，你要畫線的背景下，該行的起始位置（X，Y）的長度（像素）和角度（度）。它劃清界線，並與x和y該行的終點返回一個對象：

function lineToAngle(ctx, x1, y1, length, angle) { 

    angle *= Math.PI/180; 

    var x2 = x1 + length * Math.cos(angle), 
     y2 = y1 + length * Math.sin(angle); 

    ctx.moveTo(x1, y1); 
    ctx.lineTo(x2, y2); 
    ctx.stroke(); 

    return {x: x2, y: y2}; 
} 

然後叫它爲：

var pos = lineToAngle(ctx, 0, 0, 70, -10); 

//show result of end point 
console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2)); 

結果：

x: 68.94 y: -12.16 

或者您可以通過這樣做擴展畫布上下文：

if (typeof CanvasRenderingContext2D !== 'undefined') { 

    CanvasRenderingContext2D.prototype.lineToAngle = 
     function(x1, y1, length, angle) { 

      angle *= Math.PI/180; 

      var x2 = x1 + length * Math.cos(angle), 
       y2 = y1 + length * Math.sin(angle); 

      this.moveTo(x1, y1); 
      this.lineTo(x2, y2); 

      return {x: x2, y: y2}; 
     } 
} 

然後直接用它在你的背景是這樣的：

var pos = ctx.lineToAngle(100, 100, 70, -10); 
ctx.stroke(); //we stroke separately to allow this being used in a path 

console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2)); 

（0度將指向右側）。

Answer 2

所以你問「在我設置了一個轉換後，我該如何運行轉換點」？

在這種情況下，請參閱HTML5 Canvas get transform matrix?。問題和答案有點舊，但似乎是最新的。在當前的HTML5規範中，我找不到任何可以訪問和使用變換矩陣的內容。 （我發現它在理論上可通過context.currentTransform訪問，但是我沒有看到任何讓你使用矩陣的功能 - 你必須自己將矩陣乘以矩陣，或者通過爲點矢量創建一個完整的SVGMatrix來僞造它）

最上面的答案顯示了可以使用的變換類。通過它跟蹤您的更改，並使用它們的transformPoint函數獲取要轉換爲其端點的點。