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

Question

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

这是一个时钟项目，所以我希望线 x 和 y 点不是恒定的，我的意思是线应该使用正弦和余弦围绕一个点旋转，没有 ctx.rotate 只有数学。

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

Answer 1

对于原点在左上角的 HTML5 Canvas ，从垂直方向顺时针旋转点的一般公式是:

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

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

对于您的时钟 handle ，只需使用这些公式三(或四)次，具体取决于您希望 handle 以点(即三 Angular 形)还是直线(即平行四边形)结束。

根据所需时间计算theta，然后针对每个点调整它(并选择合适的r)以获得所需的形状。

参见 http://jsfiddle.net/alnitak/NgQWH/演示