<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>时钟特效</title> <style> #canvas{ border:1px solid #ccc; display:block; margin:0 auto; } </style> </head> <body> <canvas id=“canvas”> <p>测试浏览器是否支持canvas</p> </canvas> </body> <script> var can=document.getElementById(‘canvas’); //设置宽度和高度 can.width=600; can.height=500; //获取2d绘制对象 var cxt=can.getContext(‘2d’); //绘制钟表 function draw(){ var r=200; //存储当前状态 cxt.save(); //绘制图 cxt.beginPath(); cxt.arc(300,250,r,0,Math.PI*2); // lineWidth(5) cxt.fillStyle=’#fff’; cxt.fill(); cxt.strokeStyle = ‘#FF33CC’; cxt.lineWidth = 5; cxt.stroke(); cxt.closePath(); //移动原点到 cxt.translate(300,250); //绘制时间
for(var i=0; i<60; i++){ if(i%5 == 0){ cxt.beginPath(); cxt.moveTo(0,200); cxt.lineTo(0,186); cxt.lineWidth = 4; cxt.strokeStyle = “#FF33CC”; cxt.stroke(); cxt.rotate(Math.PI/30); }else{ cxt.beginPath(); cxt.moveTo(0,200); cxt.lineTo(0,192); cxt.lineWidth = 1; cxt.strokeStyle = “#FF33CC”; cxt.stroke(); cxt.rotate(Math.PI/30); } } //当前时间 var now=new Date(); //获取当前的小时 var hour=now.getHours(); //获取当前的分钟 var minute=now.getMinutes(); //当前的妙数 var second=now.getSeconds(); // 时针 // 秒针每一秒要动 Math.PI2 / 60 cxt.save() cxt.rotate(Math.PI2*hour/12);
cxt.beginPath(); cxt.moveTo(0,10); cxt.lineTo(0,-80); // 秒针红色 cxt.strokeStyle = ‘#FF0033’; cxt.lineWidth = 5; cxt.stroke(); cxt.closePath(); // 恢复 cxt.restore(); // 绘制分针 // 秒针每一秒要动 Math.PI2 / 60 cxt.save() cxt.rotate(Math.PI2minute/60); cxt.beginPath(); cxt.moveTo(0,20); cxt.lineTo(0,-120); // 秒针红色 cxt.strokeStyle = ‘#FF0066’; cxt.lineWidth = 3; cxt.stroke(); cxt.closePath(); // 恢复 cxt.restore(); // 秒针每一秒要动 Math.PI2 / 60 cxt.save() cxt.rotate(Math.PI2second/60); cxt.beginPath(); cxt.moveTo(0,30); cxt.lineTo(0,-175); cxt.strokeStyle = ‘#FF0099’; cxt.stroke(); cxt.closePath(); // 回复 cxt.restore(); // 以该原点绘制一个红色的小圆 cxt.beginPath(); cxt.arc(0,0,5,0,Math.PI*2); cxt.fillStyle = ‘red’; cxt.fill(); cxt.closePath(); // 都绘制结束之后，将原点切换到0,0 cxt.restore(); } draw(); setInterval(function(){ // 清除一次画布 cxt.clearRect(0,0,600,500) // 重绘面板 draw(); },1000) </script> </html>
