使用Canvas 绘制动态时钟

<canvas id="clock" width="600px" height="600px"></canvas>
## js代码
        
var dom = document.getElementById('clock');

var ctx = dom.getContext('2d');

var width = ctx.canvas.width;
var height = ctx.canvas.height;

var r  = width / 2;
var rem = width / 200;
function drawBackground(){

   ctx.save();
   ctx.translate(r,r); // 中心
   ctx.beginPath();  // 起始路径
   ctx.lineWidth = 6 * rem; // 线条的宽度
   ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false); // 创建圆
   ctx.stroke(); // 绘制已定义的路径

   // 设置 时针 顺时针从中心
   var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
   ctx.font = 18 * rem +'px Arial'; // 设置字体 字号
   ctx.textAlign = 'center';  // 设置文本水平居中
   ctx.textBaseline = 'middle' // 设置文本垂直居中
       // 遍历小时数
       hourNumbers.forEach(function(number,i){
           var rad = 2 * Math.PI / 12 * i; // 设置每个角的弧度
           var x = Math.cos(rad) * (r - 30 * rem);  // X坐标半径
           var y = Math.sin(rad) * (r - 30 * rem); // y坐标半径
           ctx.fillText(number, x,y); // 设置文本
       })


       // 绘制 60个点  有时针的地方显示黑色  没有时针的地方显示灰色
       for (var i=0; i < 60; i ++ ){
           var rad = 2 * Math.PI / 60 * i;
           var x = Math.cos(rad) * (r - 18 * rem);  // X坐标半径
           var y = Math.sin(rad) * (r - 18 * rem); // y坐标半径
           ctx.beginPath();  // 重启路径
           if (i % 5 == 0) {
               ctx.fillStyle = "#000"
               ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
           } else {
               ctx.fillStyle = "#ccc"
               ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false);
           }
           ctx.arc(x, y, 2, 0, 2 * Math.PI, false);

           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 * rem;
   ctx.lineCap = "round";
   ctx.moveTo(0, 10 * rem);
   ctx.lineTo(0, -r / 2);
   ctx.stroke();
   ctx.restore();
}
//  绘制分钟
function drawMinute(minute) {
   ctx.save();
   ctx.beginPath();
   var rad = 2 * Math.PI / 60 * minute;
   // var rad = 2 * Math.PI / 12 * hour;
   ctx.rotate(rad);
   ctx.moveTo(0, 10 * rem);
   ctx.lineWidth = 3 * rem;
   ctx.lineCap = "round";
   ctx.lineTo(0, -r + 30 * rem);
   ctx.stroke();
   ctx.restore();
}

// 绘制秒
function drawSecond(second) {
   ctx.save();
   ctx.beginPath();
   ctx.fillStyle = '#c14543'
   var rad = 2 * Math.PI / 60 * second;
   // var rad = 2 * Math.PI / 12 * hour;
   ctx.rotate(rad);
   ctx.moveTo(-2 * rem, 20 * rem);
   ctx.lineTo(2 * rem, 20 * rem);
   ctx.lineTo(1, -r + 18 * rem);
   ctx.lineTo(-1, -r + 18 * rem);

   ctx.fill();
   
   ctx.restore();
}

// 绘制 表中小白点
function drawDot() {
   ctx.beginPath();
   ctx.fillStyle = '#fff'
   ctx.arc(0, 0, 3 * rem, 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);
   drawSecond(second);
   drawDot();
   ctx.restore();
}

draw();
// 定时 动态播放
setInterval(draw, 1000);