HTML5とCanvasで作られたclockのサンプル
htmlコード
<img src="clogo.png" id="simg" style="display:none" />
<canvas id="cav" width="400″ height="400″ style="margin-left:auto; margin-right:auto; width:100%" ></canvas>
javascriptコード：
var imgsrc=document.getElementById(“simg");
var ctx = document.getElementById('cav’).getContext('2d’);
ctx.clearRect(0,0,400,400);
function draw(ctx,cx,cy){
rd=180;
for(i=1;i<=60;i++){
ctx.strokeStyle="#333″;
ctx.lineWidth=1;
ctx.beginPath();
rarc=i/60*2*Math.PI;
y=2*200*Math.sin(rarc/2.0)*Math.sin(rarc/2.0);
x=y/(Math.tan(rarc/2));
x2=(x*rd)/200;
y2=200-((200-y)*x2/x);
x3=(x*(rd-20))/200;
y3=200-((200-y)*x3/x);
ctx.moveTo(200+x,y);
ctx.lineTo(200+x2,y2);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
for(i=1;i<=12;i++){
ctx.strokeStyle="#f00″;
ctx.lineWidth=8;
ctx.beginPath();
rarc=i/12*2*Math.PI;
y=2*200*Math.sin(rarc/2.0)*Math.sin(rarc/2.0);
x=y/(Math.tan(rarc/2));
x2=(x*rd)/200;
y2=200-((200-y)*x2/x);
x3=(x*(rd-20))/200;
y3=200-((200-y)*x3/x);
ctx.moveTo(200+x,y);
ctx.lineTo(200+x2,y2);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.font="20px Arial";
ctx.fillStyle="#000″;
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillText(i,200+x3,y3);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
var date=new Date();
var yy=date.getYear();
var MM=date.getMonth() + 1;
var dd=date.getDay();
var hh=date.getHours();
var mm=date.getMinutes();
var ss=date.getSeconds();
var sss=date.getMilliseconds();
rd=140;
ctx.strokeStyle="#777″;
ctx.lineWidth=3;
ctx.beginPath();
rarc=(mm/60+(1/60)*(ss/60)+(1/60)*(1/60)*(sss/1000))*2*Math.PI;
y=2*200*Math.sin(rarc/2.0)*Math.sin(rarc/2.0);
x=y/(Math.tan(rarc/2));
x2=(x*rd)/200;
y2=200-((200-y)*x2/x);
x3=(x*(rd-20))/200;
y3=200-((200-y)*x3/x);
ctx.moveTo(200,200);
ctx.lineTo(200+x2,y2);
ctx.closePath();
ctx.fill();
ctx.stroke();
rd=120;
ctx.strokeStyle="#999″;
ctx.lineWidth=6;
ctx.beginPath();
rarc=(hh/12+ mm/60*(1/12)+(1/60)*(ss/60)*(1/12)+(1/60)*(1/60)*(sss/1000)*(1/12))*2*Math.PI;
y=2*200*Math.sin(rarc/2.0)*Math.sin(rarc/2.0);
x=y/(Math.tan(rarc/2));
x2=(x*rd)/200;
y2=200-((200-y)*x2/x);
x3=(x*(rd-20))/200;
y3=200-((200-y)*x3/x);
ctx.moveTo(200,200);
ctx.lineTo(200+x2,y2);
ctx.closePath();
ctx.fill();
ctx.stroke();
rd=180;
ctx.strokeStyle="#333″;
ctx.lineWidth=1;
ctx.beginPath();
rarc=((ss/60)-1+(1/60)*(sss/1000))*2*Math.PI;
y=2*200*Math.sin(rarc/2.0)*Math.sin(rarc/2.0);
x=y/(Math.tan(rarc/2));
x2=(x*rd)/200;
y2=200-((200-y)*x2/x);
x3=(x*(rd-60))/200;
y3=200-((200-y)*x3/x);
ctx.moveTo(200,200);
ctx.lineTo(200+x2,y2);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.strokeStyle="#999″;
ctx.beginPath();
ctx.fillStyle="#f00″;
ctx.arc(200+x3, y3,15,0,2*Math.PI);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.drawImage(imgsrc, 200+x3-10, y3-10,20,20);
}
//draw(ctx,200,200,200);
function drawClock(){
ctx.clearRect(0,0,400,400);
draw(ctx,200,200);
}
setInterval(drawClock,60/1000);