Canvas で時計の針を動かす（シンプルコード版）

日付:

以前、時計の針が動くものを Canvas で作ったのですが、コードが長くて冗長な感じになってしまいました。

もっと短くできるだろうと思い、挑戦してみました。

コードをシンプルにする

ブラウザで見る

↓clockhand_canvas.js

ブラウザで見る

時計の針の動作を以下にまとめてみました。

function clockHand(rad, hand_length) {
	angle = (Math.PI / 180) * rad;
	ctx.beginPath();
	ctx.moveTo(cx, cy);
	ctx.lineTo(
		cx + Math.cos(angle) * hand_length,
		cy + Math.sin(angle) * hand_length
	);
	ctx.stroke();
}

そして、それぞれの針の数値はrenderの以下の部分に設定しています。

clockHand(new Date().getHours() * 30 - 90, 100);
clockHand(new Date().getMinutes() * 6 - 90, 150);
clockHand(new Date().getSeconds() * 6 - 90, 250);

シンプルにしたつもりなのですが、おそらく全然シンプルじゃないですね。。

もっと勉強して、さらに改善できるようにします。