HTML5 Canvas - 最简单的方法是绘制一条越来越厚的线到底？

Question

最简单的方法是绘制一条越来越厚的线到底？ 像这样：

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

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

Answer 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/了解演示