canvas时钟特效

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)