Javascriptでデジタル時計を作る方法を見つけたので、時計の絵を描いてあげればアナログ時計も作れるのでは?と思いアナログ時計の秒針をCansvasで描いてみました。
JavaScriptで現在の時刻を表示する。
以前にJavaScrptで日時を取得する方法は調べてあるので、1秒ごとに時刻を更新するタイマー機能を組み込んでみました。$(function(){ setInterval(function(){ var d = new Date(); va...
$(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.translate( ele.width/2, ele.height/2 ) ;
ctx.rotate( (sec * 6) * Math.PI / 180 ) ;
ctx.translate( -ele.width/2, -ele.height/2 ) ;
ctx.arc( 250, 250, 200, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
ctx.stroke() ;
ctx.moveTo(250, 250);
ctx.lineTo(250, 100);
ctx.stroke() ;
ctx.restore();
var str = "";
str += sec;
$("#result").text(str);
}, 1000);
});
Cnavasにrotate()
という回転機能があるので、秒針に見立てた直線をrotate()
で回転させればよいのでは?と思い試してみました。作ってみて知ったのですが、rotate()
は描画した図形を動かす(回転)のではなくCanvas自体を回転させているようです。回転の中心となる座標は(0,0)のようなので左上中心に回転するイメージになります。そのため、回転の前後でtranslate()
で中心を移動させています。
秒針だけであればこれでも良いですが、それ以外の針を表現するにはこの方法では難しそうです。
コメント