查找画布旋转

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函数获取要转换为其端点的点。