javascript - 在 Canvas 上绘制具有 2 个点的图像

Question

我必须指向 (x1, x2, y1, y2)。我如何在 Canvas 上绘制一个图像(就像一个宽度为 10 高度为 100 的矩形)，起点为 x1、y1 并且旋转 Angular 由两点之间的线的斜率决定？

这就像我想将这条线与图像重叠:

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将围绕 Canvas 原点旋转上下文。

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

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);