時計を練習で作って見ました。もしよかったら、使ってくださいね＾＾

[code lang=html]
<script type="text/javascript">
function draw(){
var canvas = document.getElementById("tokei");

if(!canvas || !canvas.getContext) return false;

var ctx = canvas.getContext('2d');

// background
ctx.fillStyle='rgb(0,0,0)';
ctx.fillRect(10,10,620,620);

ctx.fillStyle='rgb(255,255,255)';
ctx.beginPath();
ctx.arc(320, 320, 300, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();

// dots
ctx.fillStyle='rgb(90,90,90)';
for(var i=0; i<60; i++){
ctx.beginPath();
if(i%5==0){
ctx.arc(320+280*Math.cos(i*Math.PI/30),320+ 280*Math.sin(i*Math.PI/30),10, 0, 2*Math.PI, true);
} else {
ctx.arc(320+280*Math.cos(i*Math.PI/30),320+ 280*Math.sin(i*Math.PI/30),2, 0, 2*Math.PI, true);
}
ctx.closePath();
ctx.fill();
}

// center
ctx.fillStyle='rgb(0,0,0)';
ctx.beginPath();
ctx.arc(320, 320, 20, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();

// hour hand
var d = new Date();
ctx.save();
ctx.translate(320,320);
ctx.rotate(2*Math.PI*(3600*d.getHours()+60*d.getMinutes()+d.getSeconds())/12/3600);
ctx.fillRect(-10,0,20,-180);
ctx.restore();

// minute hand
ctx.save();
ctx.translate(320,320);
ctx.rotate(2*Math.PI*(60000*d.getMinutes()+1000*d.getSeconds()+d.getMilliseconds())/3600000);
ctx.fillRect(-5,0,10,-280);
ctx.restore();

// second hand
ctx.save();
ctx.translate(320,320);
ctx.rotate(2*Math.PI*(1000*d.getSeconds()+d.getMilliseconds())/60000);
ctx.fillRect(-2,0,4,-250);
ctx.restore();
};

onload = function(){
setInterval(draw,30);
};
</script>
[/code]