javascript - HTML5 Canvas - 最後までどんどん太くなる線を描く最も簡単な方法は?

Question

最後までどんどん太くなる線を描く一番簡単な方法は何ですか? このような：

そして、これは時計プロジェクトのためのものなので、線の x 点と y 点が一定にならないようにしたいのです。

簡単に言えば、黒い点の周りで線を回転させるにはどうすればよいですか?

Answer 1

原点が左上にある HTML5 キャンバスの場合、垂直方向から時計回りに回転したポイントの一般式は次のとおりです。

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

は時計[cx, cy]の中心点で、thetaラジアンで測定されます。

時計ハンドルの場合、ハンドルを点 (つまり三角形) で終わらせるか線 (つまり平行四辺形) で終わらせるかによって、これらの式を 3 回 (または 4 回) 使用するだけです。

theta所要時間に基づいて計算しr、必要な形状に合わせてポイントごとに調整 (および適切な を選択) します。

デモについてはhttp://jsfiddle.net/alnitak/NgQWH/を参照してください