HTML5 Canvas-画出越来越粗的线的最简单方法是什么？

Question

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

这是一个时钟项目，所以我希望线x和y点不恒定，我的意思是线应该使用窦和余弦no ctx绕一个点旋转。仅旋转MATH。

简而言之，如何使线绕黑点旋转？

Answer 1

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

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

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

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

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