javascript - HTML5 Canvas - 画一条越来越粗的线到最后的最简单方法是什么？

Question

画一条越来越粗的线到最后的最简单方法是什么？像这样：

这是一个时钟项目，所以我希望线 x 和 y 点不是恒定的，我的意思是线应该使用 sinus 和 cosinus no ctx.rotate only MATH 围绕一个点旋转。

简单地说，我怎样才能让线围绕黑点旋转？

score 5 · Accepted Answer

对于原点位于左上角的 HTML5 画布，从垂直方向顺时针旋转的点的一般公式为：

var x = cx + r * Math.sin(theta);
var y = cy - r * Math.cos(theta);

[cx, cy]时钟的中心点在哪里，theta以弧度为单位。

对于您的时钟手柄，只需使用这些公式三次（或四次），具体取决于您希望手柄结束于点（即三角形）还是线（即平行四边形）。

theta根据所需时间计算，然后为每个点调整（并选择合适r的）以适应所需的形状。

1 回答 1