今天般了一个钟表代码，哈哈

var dom = document.getElementById('clock'); var ctx = dom.getContext('2d'); var width = ctx.canvas.width; var height = ctx.canvas.height; var r = width / 2; //定义钟盘 function drawBackground(){     ctx.save();     ctx.translate(r, r);     ctx.beginPath();     ctx.lineWidth = 10;     ctx.font ='18px Arial';     ctx.textAlign = 'center'     ctx.textBaseline = 'middle'     ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);     ctx.stroke();     var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];     //遍历获取坐标     hourNumbers.forEach(function(number, i){         var rad = 2 * Math.PI / 12 * i;         var x = Math.cos(rad) * (r - 30);         var y = Math.sin(rad) * (r - 30);         ctx.fillText(number, x ,y);     })
    //定义刻度     for(var i=0;i<60;i++){         var rad = 2 * Math.PI / 60 * i;         var x = Math.cos(rad) * (r - 18);         var y = Math.sin(rad) * (r - 18);         ctx.beginPath();         if(i % 5 == 0){             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);             ctx.fillStyle = '#000';         }else{             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);             ctx.fillStyle = '#ccc';         }         ctx.fill();     }
}
//定义时钟 function drawHour(hour,minute){     ctx.save();     ctx.beginPath();     var rad = 2 * Math.PI / 12 * hour;     var mrad = 2 * Math.PI / 12 / 60 * minute;     ctx.rotate(rad + mrad);     ctx.lineWidth = 6;     ctx.lineCap= 'round';     ctx.moveTo(0 ,10);     ctx.lineTo(0 ,-r / 2);     ctx.stroke();     ctx.restore(); } //定义分钟 function drawMinute(minute,second){     ctx.save();     ctx.beginPath();     var rad = 2 * Math.PI / 60 * minute;     var srad = 2 * Math.PI / 60 /60 * second;     ctx.rotate(rad + srad);     ctx.lineWidth = 3;     ctx.lineCap= 'round';     ctx.moveTo(0 ,10);     ctx.lineTo(0 ,-r + 18);     ctx.stroke();     ctx.restore(); } //定义秒钟 function drawSecond(second){     ctx.save();     ctx.beginPath();     var rad = 2 * Math.PI / 60 * second;     ctx.rotate(rad);     ctx.lineWidth = 3;     ctx.lineCap= 'round';     ctx.moveTo(-2 ,20);     ctx.lineTo( 2, 20);     ctx.lineTo( 1, -r + 18);     ctx.lineTo( -1, -r + 18);     ctx.fillStyle = '#c14543';     ctx.fill();     ctx.restore(); } //定义钟盘圆点样式 function drawDot(){     ctx.beginPath();     ctx.fillStyle = '#fff';     ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);     ctx.fill(); }
//时间函数 function draw(){     ctx.clearRect(0, 0, width, height);     var now = new Date();     var hour = now.getHours();     var minute = now.getMinutes();     var second = now.getSeconds();     drawBackground();     drawHour(hour,minute);     drawMinute(minute,second);     drawSecond(second);     drawDot();     ctx.restore(); } setInterval(draw, 1000);