canvas 实例之闹钟

    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let x = canvas.width / 2, //
        y = canvas.height / 2;
    function draw() {
        ctx.translate(x, y); //将画布原点移到中心  默认画布原点在左上角
        ctx.save();
        //画大圆盘
        ctx.beginPath();
        ctx.arc(0, 0, 200, 0, Math.PI * 2);
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = '10';
        ctx.stroke();
        ctx.restore();

        //画小时数
        ctx.save();
        let hourNum = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
        ctx.font = '18px Arial';
        ctx.strokeStyle = '#333';
        ctx.textAlign = 'center';//水平对齐方式
        ctx.textBaseline = 'middle';//垂直方向上水平居中
        hourNum.forEach((item, index) => {
            let rad = Math.PI * 2 / 12 * index;
            let x = Math.cos(rad) * 160;
            let y = Math.sin(rad) * 160;
            ctx.fillText(item, x, y);
        })
     
        //画小数点
        for (let i = 0; i < 60; i++) {
            let rad = Math.PI * 2 / 60 * i;
            let x = Math.cos(rad) * 180,
                y = Math.sin(rad) * 180;
            if (i % 5 == 0) {
                //小时对应的点
                ctx.beginPath();
                ctx.arc(x, y, 6, 0, Math.PI * 2);
                ctx.fillStyle = 'green'
                ctx.fill();
            }
            else {
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, Math.PI * 2);
                ctx.fillStyle = 'red';
                ctx.fill();
            }
        }
        ctx.restore();
    }
    function drawDot() {
        ctx.save();
        ctx.beginPath(0,0);
        ctx.arc(0, 0, 10, 0, Math.PI * 2);
        // ctx.fillStyle = 'red';
        ctx.fill();
        ctx.restore();
    }
    function drawHour(h,m) {
        ctx.save();
        ctx.beginPath(0, 0);
        let rad=Math.PI*2/12*(h+m/60);
        ctx.rotate(rad);//旋转的角度必须写在画线之前
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -100);
        ctx.strokeStyle = 'green';
        ctx.lineWidth = '3'
        ctx.stroke();
        ctx.restore();
    }
    function drawMinute(m) {
        ctx.save();
        ctx.beginPath(0, 0);
        let rad=Math.PI*2/60*m;
        ctx.rotate(rad);
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -120);
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = '2'
        ctx.stroke();
        ctx.restore();
    }
    function drawSecond(s) {
        ctx.save();
        ctx.beginPath();
        let rad=Math.PI*2/60*s;
        ctx.rotate(rad);
        ctx.moveTo(0, 20);
        ctx.lineTo(0, -140);
        ctx.strokeStyle = 'red';
        ctx.lineWidth = '1'
        ctx.stroke();
        ctx.restore();
    }
    let timer = setInterval(() => {
        ctx.save();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        let date = new Date();
        let h = date.getHours(),
            m = date.getMinutes(),
            s = date.getSeconds();
        draw();
        drawDot();
        drawHour(h,m);
        drawMinute(m);
        drawSecond(s);
        ctx.restore();
    }, 1000)