javascript&canvas自动获取时间的时钟
实现效果如下:
源码展示
<!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>