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

Question

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

这是一个时钟项目,所以我希望线x和y点不是恒定的,我的意思是线应该使用窦和cosinus旋转一个点没有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/