canvas绘制表盘时钟

话不多说，请看代码：
<！DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas绘制表盘</title></head><body> <canvas id="box" width="500" height="500" > 您的浏览器不支持canvas </canvas> <script> var box = document.getElementById（"box"）; var cxt = box.getContext（"2d"）; // 时钟动起来 var timer = null; function clock（）{var date = new Date（）;var h = date.getHours（）;h = h + h/60;h = h>12? h-12:h;var m = date.getMinutes（）;var s = date.getSeconds（）;// 清画布cxt.clearRect（0,0,500,500）; // 画表盘cxt.strokeStyle = "#f0f";cxt.lineWidth = 6;cxt.beginPath（）;cxt.arc（250,250,100,0,2*Math.PI）;cxt.stroke（）;// 画时钟刻度for（var i=0; i<12; i++）{cxt.save（）;cxt.translate（250,250）;cxt.rotate（30*i*Math.PI/180）;cxt.lineWidth = 3;cxt.beginPath（）;cxt.moveTo（0,-80）;cxt.lineTo（0,-92）;cxt.stroke（）;cxt.restore（）;}//画分钟刻度for（var i=0; i<60; i++）{cxt.save（）;cxt.translate（250,250）;cxt.rotate（6*i*Math.PI/180）;cxt.lineWidth = 2;cxt.beginPath（）;cxt.moveTo（0,-86）;cxt.lineTo（0,-92）;cxt.stroke（）;cxt.restore（）;}// 画时针cxt.save（）;cxt.lineWidth = 5;cxt.translate（250,250）;cxt.rotate（h*30*Math.PI/180）;cxt.beginPath（）;cxt.moveTo（0,6）;cxt.lineTo（0,-40）;cxt.stroke（）;cxt.restore（）;// 画分针cxt.save（）;cxt.lineWidth = 3;cxt.translate（250,250）;cxt.rotate（m*6*Math.PI/180）;cxt.beginPath（）;cxt.moveTo（0,8）;cxt.lineTo（0,-60）;cxt.stroke（）;cxt.restore（）;// 画秒针cxt.save（）;cxt.lineWidth = 1;cxt.translate（250,250）;cxt.rotate（s*6*Math.PI/180）;cxt.beginPath（）;cxt.moveTo（0,10）;cxt.lineTo（0,-75）;cxt.stroke（）;cxt.restore（）;// 画中心的小圆固定三根针cxt.save（）;cxt.beginPath（）;cxt.fillStyle = "#0f0";cxt.lineWidth = 2;cxt.translate（250,250）;cxt.arc（0,0,2,0,360,false）;cxt.stroke（）;cxt.fill（）;cxt.restore（）;// 画秒针上的园cxt.save（）;cxt.fillStyle = "#f00";cxt.lineWidth = 2;cxt.translate（250,250）;cxt.rotate（s*6*Math.PI/180）;cxt.beginPath（）;cxt.arc（0,-60,2,0,360,false）;cxt.stroke（）;cxt.fill（）;cxt.restore（）; } clock（）; timer = setInterval（clock,1000）; </script></body></html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！