canvas实战：绘制逼真的12小时制时钟动态效果-优快云博客

使用canvas绘制时钟效果
创建一个canvas之后拥有三要素：

id——画布的唯一标识
width——画布的宽
height——画布的高

**强烈建议不要使用css修改画布的宽高，因为画布的宽高表示的是画布内元素的像素大小，而使用css修改的宽高则是画布的大小，修改不当会导致内容失真或者模糊或者不全

使用canvas绘制时，一般步骤：

获取HTML中的画布元素
获取对应画布的上下文（画笔），这里想象为画笔更好理解，比如我们在电脑或平板上画图是会选择线条的粗细，线条的颜色等等，这个画笔也可以这么干！
根据相应的api绘制需要的图像

以下为使用canvas绘制时钟的代码，注释很详细，相信大家一定可以看懂滴！
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用canvas绘制时钟</title>

</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
        init(); // 创建
        function init() {
            var c = document.getElementById("canvas"); //获取画布
            var ctx = c.getContext("2d"); //拿到画笔
            draw(ctx);
        }
        // 开始绘制
        function draw(ctx) {
            setInterval(function() {
                drawDial(ctx); //绘制表盘
                drawHands(ctx); //绘制指针
            }, 1000);
        }
        // 绘制所有指针
        function drawHands(ctx) {
            let now = new Date(); //获取当前时间
            let second = now.getSeconds(),
                min = now.getMinutes(),
                hour = now.getHours();
            hour = hour >= 12 ? hour - 12 : hour; //将时间转换成12小时制
            let pi = Math.PI;
            let secondAngle = pi / 180 * 6 * second; //获取秒针当前转动的角度
            let minuteAngle = pi / 180 * 6 * min + secondAngle / 60; //获取分针当前转动的角度
            let hourAngle = pi / 180 * 30 * hour + minuteAngle / 12; //获取时针当前转动的角度
            drawHand(hourAngle, 160, 12, 'black', ctx);
            drawHand(minuteAngle, 190, 8, 'black', ctx);
            drawHand(secondAngle, 220, 5, 'red', ctx);
        }
        // 绘制特定指针
        function drawHand(angle, len, width, color, ctx) {
            ctx.save();
            ctx.translate(300, 300);
            ctx.rotate(-Math.PI / 2 + angle); //将x轴逆时针旋转90度，以与x轴正方向的夹角为正夹角旋转指针对应的角度
            ctx.beginPath();
            ctx.moveTo(-20, 0); //绘制指针
            ctx.lineTo(len, 0);
            ctx.lineWidth = width;
            ctx.strokeStyle = color;
            ctx.lineCap = "round";
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
        }
        // 绘制表盘
        function drawDial(ctx) {
            let pi = Math.PI;
            ctx.clearRect(0, 0, 600, 600); //初始化表盘
            ctx.save();

            ctx.translate(300, 300);
            ctx.beginPath();
            ctx.strokeStyle = "blue";
            ctx.lineWidth = 4;
            ctx.arc(0, 0, 295, 0, Math.PI * 2, true); //绘制表盘外侧的框框
            ctx.stroke();
            ctx.closePath();

            // 绘制时针刻度
            ctx.save();
            ctx.beginPath();
            ctx.strokeStyle = 'red';
            for (var i = 0; i < 12; i++) {
                ctx.rotate(Math.PI / 6); //旋转30度
                ctx.moveTo(250, 0);
                ctx.lineTo(290, 0);
            }
            ctx.stroke();
            ctx.closePath();
            ctx.restore();
            ctx.save();

            // 绘制秒针刻度
            ctx.beginPath();
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'black'
            for (var i = 0; i < 60; i++) {
                if (i % 5 != 0) { //每当转到 整数小时 时跳过，即控制整点时刻 刻度较长
                    ctx.moveTo(270, 0);
                    ctx.lineTo(290, 0);
                }
                ctx.rotate(pi / 30); // 转6度
            }
            ctx.stroke();
            ctx.closePath();
            ctx.restore();

            ctx.restore();
        }
    </script>
</body>

</html>