摘要：<!DOCTYPE html> <html> <head> <title>时钟</title> </head> <body> <canvas id="box"></canvas> </body> <script type=
<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
</head>
<body>
<canvas id="box"></canvas>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
box.width=500;
box.height=500;
//判断浏览器是否支持，源码无本操作
if(box.getContext){
var boxcont=box.getContext('2d');
}
else{
alert("浏览器不支持");
}
//画出外圆
function aa(){
boxcont.clearRect(0,0,box.width,box.height);
boxcont.beginPath();
boxcont.arc(250,250,250,0,2*Math.PI);
boxcont.strokeStyle='#aaa';
boxcont.stroke();
//两分钟格
boxcont.beginPath();
var tangleR=0;
for(var i=0;i<360;i++){
var x;var y;
boxcont.beginPath();
boxcont.moveTo(250,250);
x=250+Math.cos(tangleR* Math.PI / 180 ) * (250);
y=250+Math.sin(tangleR* Math.PI / 180 ) * (250);
tangleR++;
boxcont.strokeStyle='#ccc';
boxcont.lineTo(x,y);
boxcont.stroke();
}
boxcont.beginPath();
boxcont.arc(250,250,235,0*(Math.PI/180),360*(Math.PI/180));
boxcont.fillStyle='#ffffff';
boxcont.fill();
//画12分钟格
for(var i=0;i<360;i++){
var x;var y;
boxcont.beginPath();
boxcont.moveTo(250,250);
x=250+Math.cos(tangleR* Math.PI / 180 ) * (250);
y=250+Math.sin(tangleR* Math.PI / 180 ) * (250);
tangleR=tangleR+6;
boxcont.strokeStyle='#ccc';
boxcont.lineTo(x,y);
boxcont.stroke();
}
boxcont.beginPath();
boxcont.arc(250,250,220,0*(Math.PI/180),360*(Math.PI/180));
boxcont.fillStyle='#ffffff';
boxcont.fill();
//画1-12小时
var tangleR2=-60;
for(var i=0;i<12;i++){
var x;var y;
boxcont.beginPath();
boxcont.moveTo(250,250);
x=250+Math.cos(tangleR2* Math.PI / 180 ) * (195);
y=250+Math.sin(tangleR2* Math.PI / 180 ) * (195);
tangleR2=tangleR2+30;
boxcont.fillStyle='#aaa';
boxcont.fillText(''+(i+1),x,y);
boxcont.fill();
}
//画中心圆点
boxcont.beginPath();
boxcont.arc(250,250,5,0*(Math.PI/180),360*(Math.PI/180));
boxcont.stroke();
boxcont.fill();
//获取时间并转换为坐标
var time=new Date();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
var mj=m*6+(s/60)*6-90;//转换为弧度减去90是为了从12点方向开始
var sj=s*6-90;
var hj=(h+1)*15+(m/60+1)*15+(s/3600+1)*15-90;//加1是为了把0-23变成1-24，乘以15是变成360度的弧度
x0=250+Math.cos(hj* Math.PI / 180 ) * (250-120);
x1=250+Math.cos(mj* Math.PI / 180 ) * (250-100);
x2=250+Math.cos(sj* Math.PI / 180 ) * (250-60);
y0=250+Math.sin(hj* Math.PI / 180 ) * (250-120);
y1=250+Math.sin(mj* Math.PI / 180 ) * (250-100);
y2=250+Math.sin(sj* Math.PI / 180 ) * (250-60);
//画时针
boxcont.beginPath();
boxcont.moveTo(250,250);
boxcont.lineTo(x0,y0);
boxcont.stroke();
//画分针
boxcont.beginPath();
boxcont.moveTo(250,250);
boxcont.lineTo(x1,y1);
boxcont.stroke();
//画秒针
boxcont.beginPath();
boxcont.moveTo(250,250);
boxcont.lineTo(x2,y2);
boxcont.stroke();
}
//a每秒钟调用aa()一次即每秒指针动一次
setInterval(function(){
aa();
},1000)
</script>
</html>
批改老师：韦小宝批改时间：2018-11-14 09:10:27
老师总结：嗯！很不错！知道自己找点案例来模仿很不错啊！但是每次都得记得要有总结！这样学的才快哦~继续加油吧！！！
