canvas时钟特效

时钟特效 #canvas{ border:1px solid #ccc; display:block; margin:0 auto; }

测试浏览器是否支持canvas

2*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)