JSClock1

HTML5とかJSとか

アナログ時計の逆回転化†

えっとね、まず、ここの時計をみてほしいの。

http://www.oikawa-sekkei.com/web/design/html/html5-canvas-clock.html

シンプルだけど、いいアナログ時計よね。しかもこれ、画像を使わずに全部描画みたいなのよね。

それで、表示してみたのだけど。

どうせなら逆回転時計がほしい。
秒針は赤がいいの。

という、わがままな要求が。

うーん、JavaScriptのCanvasの書き方なんか知らないよ。PIを使った針の書き方も忘れて久しいよ。

ま、まぁいいわ。せっかくコードを見せてくださっているんだもの、改造してみましょう。

↑

逆回転化。†

↑

文字盤を逆にしてみよう。†

まず、文字盤のコードは以下ね。

// 文字盤
ctx.save();
ctx.font        = "30px 'sans-serif'";
ctx.textAlign   ="center";
ctx.textBaseline    ="middle";
ctx.fillStyle   = "rgb(0, 0, 0)";
ctx.shadowBlur = 5;
ctx.shadowColor = "#FFF";
for (var i = 0; i < 12; i++) {
   var radian = i * Math.PI / 6;
   var x = center.x + rads * Math.sin(radian);
   var y = center.y - rads * Math.cos(radian);
   var text = "" + (i == 0 ? "12" : i);
   ctx.fillText(text, x, y);
 }
ctx.restore();

これを逆にするには？

どうやら普通に数字を描いてるだけみたいだから、これは単に差し替えるだけ。

0(12)～11 を描いているところで、逆に 11～0(12)を書けばいいのね。

↑

変更前†

   var text = "" + (i == 0 ? "12" : i);

↑

変更後†

   var text = "" + ((12 - i) == 0 ? "12" : (12 - i));

これでいいわ。

↑

針を逆回転させてみよう。†

次に逆回転だけど。

これは秒針からやっていくのがわかりやすいの。

元サイトの方はわかりやすくコメントをつけてくださっているから、秒針がわかれば他の針もすぐわかると思う。変数も hr , min , sec って、とてもわかりやすいものになってるしね。

↑

秒針†

// 秒針
ctx.save();
ctx.rotate((59 - sec) * Math.PI/30);
ctx.strokeStyle = "rgb(207, 170, 77)";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(0,30);
ctx.lineTo(0,-100);
ctx.stroke();
ctx.restore();

どこを変えたかわかる？ここよ。

ここを