html5学习之canvas闹钟 点击预览:demo
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas clock</title> <style> html,body{background-color:#000; margin:0; padding:0;color:#fff;} #canvas{ margin:100px 0;background-color:#fff;} </style> </head> <body> <center> <canvas id="canvas" width="500" height="500"> <span>你的浏览器out喇,看不到效果。</span> </canvas> </center> <script type="text/javascript"> var oc=document.getElementById("canvas"); var op=oc.getContext("2d"); function move(){ var x=250; var y=250; var mdate=new Date(); var h=mdate.getHours(); var m=mdate.getMinutes(); var s=mdate.getSeconds(); var hh=(-90+h*30+m/2)*Math.PI/180; var mm=(-90+m*6)*Math.PI/180; var ss=(-90+s*6)*Math.PI/180; op.clearRect(0,0,op.width,op.height); for(var i=0;i<=60;i++){ op.lineWidth=1; op.beginPath(); op.moveTo(x,y); op.arc(x,y,150,6*i*Math.PI/180,6*(i+1)*Math.PI/180); op.closePath(); op.stroke(); } //绘制遮挡圆 op.beginPath(); op.fillStyle="#fff"; op.moveTo(x,y); op.arc(x,y,145,0*Math.PI/180,360*Math.PI/180); op.closePath(); op.fill(); //绘制时针格子 for(var i=0;i<=12;i++){ op.lineWidth=1; op.beginPath(); op.moveTo(x,y); op.arc(x,y,150,30*i*Math.PI/180,30*(i+1)*Math.PI/180); op.closePath(); op.stroke(); } //绘制遮挡圆 op.beginPath(); op.fillStyle="#fff"; op.moveTo(x,y); op.arc(x,y,140,0*Math.PI/180,360*Math.PI/180); op.closePath(); op.fill(); //绘制秒针 op.lineWidth=1; op.beginPath(); op.moveTo(x,y); op.arc(x,y,135,ss,ss,false); op.closePath(); op.stroke(); //绘制分针 op.lineWidth=2; op.beginPath(); op.moveTo(x,y); op.arc(x,y,100,mm,mm,false); op.closePath(); op.stroke(); //绘制时针 op.lineWidth=4; op.beginPath(); op.moveTo(x,y); op.arc(x,y,80,hh,hh,false); op.closePath(); op.stroke(); } setInterval(move,1000); move(); </script> </body> </html>Related content:
Better Related Posts Plugin
本文固定链接: | 山猫的博客