<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo of clock</title>
<script>
function time(){
var mycanvas=document.getElementById("myCanvasTag");
var mycontext=mycanvas.getContext('2d');
//清空画布，
mycontext.clearRect(0,0,600,500)
//时钟圆圈
mycontext.beginPath();
mycontext.arc(200,200,150,0,2*Math.PI);
mycontext.stroke();
//设置参数
var myDate = new Date();
mycontext.font='10px Arial'
mycontext.fillText(myDate.toLocaleString(),20,20)
var h=myDate.getHours();
var m=myDate.getMinutes();
var s=myDate.getSeconds();
var deg = Math.PI/180;
mycontext.beginPath();
//移动旋转点
mycontext.translate(200,200)
//绘制大刻度
for(var i=0;i<12;i++){
mycontext.lineWidth=2;
mycontext.rotate(30*deg)
mycontext.moveTo(-140,0)
mycontext.lineTo(-130,0) }
mycontext.stroke()
//绘制小刻度
for(var i=0;i<60;i++){
mycontext.lineWidth=1;
mycontext.rotate(6*deg)
mycontext.moveTo(-140,0)
mycontext.lineTo(-135,0)
}
mycontext.stroke() //绘制时针
if(h>=12){h-=12}
mycontext.rotate((30*h+m/2+s/10)*deg)
mycontext.lineWidth=3;
mycontext.moveTo(0,10);
mycontext.lineTo(0,-100)
mycontext.stroke()
//绘制分针
mycontext.rotate(-(30*h+m/2+s/10)*deg)
mycontext.rotate((6*m+s/10)*deg)
mycontext.lineWidth=2;
mycontext.moveTo(0,10);
mycontext.lineTo(0,-110)
mycontext.stroke()
mycontext.rotate(-(6*m+s/10)*deg) //绘制秒针
mycontext.rotate(6*s*deg)
mycontext.lineWidth=1;
mycontext.moveTo(0,-120);
mycontext.lineTo(0,20)
mycontext.stroke()
mycontext.rotate(-6*s*deg) //初始化旋转点
mycontext.translate(-200,-200) }
setInterval(time,1000) </script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="500" height="500"></canvas> </div>
</body>
</html>
玩了一天多的canvas,写了个时钟玩，多有不足，望指教。