javascript - Canvas 旋转 - JavaScript

Question

如果有人有答案，可以帮我吗？ 我有 2 张图像 - 背景类似于弧线和箭头。我需要将箭头图像移动到背景图像上，就像这是一个时钟收报机箭头。所以我需要:

1. 旋转箭头使其与圆弧上的当前刻度平行
2. 将箭头移动到下一个点

为此，我需要在 JavaScript 中使用 Canvas 对象及其转换方法 - 这将允许移动箭头并旋转它。

问题是:如何使用 canvas.transform 方法围绕圆弧旋转(和理想的移动)箭头？在这种情况下，哪些值以及它们之间的关系应该是什么:

contextData.clearRect (0, 0, contextData.canvas.width, contextData.canvas.height);
contextData.save ();
contextData.translate(indicatorData.width () / 2, indicatorData.height () / 2);
contextData.transform(1, 0, 0, 1, x, y);  // the question is HERE
contextData.drawImage(rotationArrow, -rotationArrow.width / 2, -rotationArrow.height / 2);
contextData.restore ();

提前致谢。

Answer 1

不要使用变换矩阵，而是使用辅助函数 .rotate

这样做可以让您围绕其中心旋转对象

contextData.save()
contextData.translate(indicatorData.width() / 2, indicatorData.height() / 2) // ASSUMING this  is the object you want to rotate around the center of and that it is being drawn at 0,0
contextData.rotate(1.57) // 1.57 radians = about 90 degrees
contextData.drawImage(rotationArrow, -rotationArrow.width / 2, -rotationArrow.height / 2);
contextData.restore()