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

【问题标题】：HTML5 Canvas - What's the simplest way to draw a line that gets thicker and thicker to the end?HTML5 Canvas - 画一条越来越粗的线到最后的最简单方法是什么？
【发布时间】：2013-06-10 23:08:13
【问题描述】：

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

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

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

【问题讨论】：

到目前为止你得到了什么？
越来越粗的线到末端通常称为三角形或 3 边多边形。
是的，不管你怎么称呼它都没关系，但你得到的图片是正确的吗？ Sooo，我该如何解决这个问题？
@Mich 试试弧线？我在jsfiddle.net/jwR8C 中做了例子
很好，但问题是旋转轴在顶部而不是底部......

标签： javascript html math canvas

【解决方案1】：

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

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

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

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

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

请参阅http://jsfiddle.net/alnitak/NgQWH/ 以获取演示

【讨论】：

@Mich 这是我自己的时钟的“更最终”版本 - jsfiddle.net/alnitak/kKTka