<!doctype html>
<html>
<head>
<meta charset="gb2312">
<script type="text/jscript">
var slen=70;
var mlen=65;
var hlen=45;
var ls=0;
var lm=0;
var lh=0;
function draw() //时钟轮廓
{
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.beginPath();
cxt.arc(200,150,5,0,2*Math.PI,true);
cxt.fill();
cxt.closePath();
cxt.beginPath();
cxt.arc(200,150,100,0,2*Math.PI,true);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.translate(200,150);
cxt.rotate(-Math.PI/2);
cxt.save();
for(var i=0;i<60;i++)
{
if(i%5==0)
{
cxt.fillRect(80,0,20,5);
}
else
{
cxt.fillRect(90,0,10,2);
}
cxt.rotate(Math.PI/30);
}
cxt.closePath();
setInterval("Refresh()",1000);
}
function Refresh()
{
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.restore();
cxt.save();
cxt.rotate(ls*Math.PI/30);
cxt.clearRect(5,-1,slen+1,4); //清除时钟针
cxt.restore();
cxt.save();
cxt.rotate(lm*Math.PI/30);
cxt.clearRect(5,-1,mlen+1,5);
cxt.restore();
cxt.save();
cxt.rotate(lh*Math.PI/6);
cxt.clearRect(5,-3,hlen+1,6);
var time=new Date();
var s=ls=time.getSeconds();
var m=lm=time.getMinutes();
var h=lh=time.getHours();
cxt.restore(); //重画时钟针
cxt.save();
cxt.rotate(s * Math.PI/30);
cxt.fillRect(5,0,slen,2);
cxt.restore();
cxt.save();
cxt.rotate(m * Math.PI/30);
cxt.fillRect(5,0,mlen,3);
cxt.restore();
cxt.save();
cxt.rotate(h * Math.PI/6);
cxt.fillRect(5,-2,hlen,4);
}
</script>
</head>
<body>
<fieldset>
<legend>绘制时钟</legend>
<canvas id="myCanvas" width="400" height="300"></canvas>
<br>
<button onClick="draw()">绘图</button>
</fieldset>
</body>
</html>
html5canvas绘制时钟
最新推荐文章于 2022-11-21 19:02:08 发布