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，因为它们相对于平移（旋转）。它基本上意味着您需要“反向工程”矩阵以获得您在画布上看到的结果位置。

如果你想计算一条在-10度处变成70像素的线，你可以使用简单的三角测量来自己计算（这比在矩阵中向后排序更容易）。

你可以使用这样的函数来获取你的上下文，线的起始位置（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函数获取您想要转换到其端点的点。

在画布旋转后查找坐标

2 个答案: