Question

我要点（x1，x2，y1，y2）。如何在画布上绘制一幅图像（它像一个宽度为10和高度为100的矩形），起点为x1，y1，旋转度由两点之间的直线斜率决定？

我希望将此行与图像重叠：

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

我试过这样：

slope = (y2 - y1) / (x2 - x1)
ctx.save();
ctx.rotate(-Math.atan(slope));
ctx.drawImage(image, x1, y1);
ctx.restore();

但没有成功。

谢谢。

Answer 1

ctx.rotate将围绕画布原点旋转上下文。

为了围绕形状的角落旋转，您需要将上下文转换为该点。

var slope = (pt.y1 - pt.y2) / (pt.x1 - pt.x2);
ctx.save();
ctx.translate(pt.x1, pt.y1);
ctx.rotate(Math.atan(slope));
// we've already moved to here, so we can draw at 0, 0
ctx.drawImage(image, 0, 0);
ctx.restore();

这仅适用于正斜率。如果斜率为负，则可以通过反转旋转来计算负斜率。

var slopeIsNegative = slope < 0;
var offsetAngle = slopeIsNegative ? Math.PI : 0;
ctx.rotate(Math.atan(slope) + offsetAngle);

在画布上绘制2个点的图像

1 个答案: