Javascriptでcanvasにアナログ時計を表示させる

トップページJavascript CSS講座⇒Javascriptでcanvasにアナログ時計を表示させる

Javascriptでcanvasにアナログ時計を表示させる


Javascriptでcanvasにアナログ時計を表示させます。
地道にSin、Cosで座標を計算して描画しています。

			
			
<div id="tm"><canvas id="cantm" width="200" height="200"></canvas></div>
<script>
	var ctx;
		ctx=document.getElementById("cantm").getContext("2d");
		ctx.scale(1,1);
		setInterval("drawclock()",500);
	});
	function drawclock(){
		var jikan=new Date();
		var hour=jikan.getHours()
		var minute=jikan.getMinutes();
		var second=jikan.getSeconds();
		var r=100;
		ctx.lineCap='round';
		ctx.beginPath();
		ctx.fillStyle="rgb(255,255,255)";
		ctx.fillRect(0,0,cantm.width,cantm.height);
		
		ctx.beginPath();
		ctx.strokeStyle="rgb(0,0,0)";
		ctx.lineWidth=3;
		ctx.arc(r,r,r*0.9,0,Math.PI*2,false);
		ctx.stroke();
		
		for(i=0;i<=60;i+=5){
			ctx.beginPath();
			ctx.strokeStyle="rgb(0,0,0)";
			ctx.lineWidth=3;
			ctx.moveTo(r+Math.cos(i/30*Math.PI)*r*0.9 ,r+Math.sin(i/30*Math.PI)*r*0.9 );
			ctx.lineTo(r+Math.cos(i/30*Math.PI)*r*0.85,r+Math.sin(i/30*Math.PI)*r*0.85);
			ctx.stroke();
		}
		
		
		//短針
		ctx.beginPath();
		ctx.strokeStyle="rgb(80,80,80)";
		ctx.lineWidth=8;
		ctx.moveTo(r,r);
		ctx.lineTo(r+Math.cos((hour+minute/60-3)/6*Math.PI)*r*0.4,r+Math.sin((hour+minute/60-3)/6*Math.PI)*r*0.4);
		ctx.stroke();
		
		//長針
		ctx.beginPath();
		ctx.strokeStyle="rgb(0,0,0)";
		ctx.lineWidth=4;
		ctx.moveTo(r,r);
		ctx.lineTo(r+Math.cos((minute-15)/30*Math.PI)*r*0.7,r+Math.sin((minute-15)/30*Math.PI)*r*0.7);
		ctx.stroke();
		
		//秒針
		ctx.beginPath();
		ctx.strokeStyle="rgb(160,160,160)";
		ctx.lineWidth=2;
		ctx.moveTo(r,r);
		ctx.lineTo(r+Math.cos((second-15)/30*Math.PI)*r*0.7,r+Math.sin((second-15)/30*Math.PI)*r*0.7);
		ctx.stroke();
	}
</script>
			
			
Mam's WebSite