JavaScriptで時計の秒針を表現する。その2

前回の記事ではrotate()でキャンバスごと回転していましたが、それだと分針や時針を描画する場合同時に回転してしまい都合が悪いです。各針ごとレイヤーとして重ね合わせれば良さそうです。その方法は、自分が当初考えていたプログラムと異なるので今回は、秒針用の線を引くための座標を自前で計算してみました。

半径rの円を描くための座標計算

確度を指定して斜めの線を引きたいのですが、色々調べてみたら円を描くことにになりました。スクリプトimport mathdef zahyou(x, y, r, angle): radian = (math.pi * angle) / 180 ...

$(function(){
  var ele = document.getElementById("cv");
  var ctx = ele.getContext("2d");
  ctx.strokeStyle = "black";
  ctx.lineWidth = 4;
  setInterval(function(){
    var d = new Date();
    var sec = d.getSeconds();
    ctx.save();
    ctx.beginPath();
    ctx.clearRect( 0, 0, ele.width, ele.height ) ;
    ctx.arc( 150, 150, 120, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
    
    var r = 100;
    var angle = sec * 6 - 90;
    var radian = (Math.PI * angle) / 180;
    var xx = Math.cos(radian) * r;
    var yy = Math.sin(radian) * r;
    
    var x = 150;
    var y = 150;
    ctx.moveTo(x, y);
    ctx.lineTo((x + xx), (y + yy));
    
    ctx.stroke();
    
    ctx.restore();
    var str = "";
    str += sec;
    $("#result").text(str);
  }, 1000);
});

三角関数で円を描く座標を計算しています。学校で習った数学的な内容は綺麗さっぱり忘れていますが、プログラムを組んであげると、それらしく動作してくれるところが何とも言えない気分になります。自動車の動作原理を知らなくとも運転免許があれば自動車を運転できるといっしょで、気分的にはすっきりしませんが、それで問題ないので良しとします。

針の確度をラジアン(radian)に変換しコサイン関数に渡し結果と半径をかけるとx座標、同じくサイン関数だとy座標を計算してくれます。後は中心座標から線を引く、これを１秒ごとに実行するとアナログ時計の秒針のような動きになりました。

以上

コメント