怎么绘制漂亮的时钟，Canvas来帮忙？

作者：图形开发学院
canvas
时间：2024-05-29 17:40:01
99次访问

绘制漂亮的时钟需要使用到Canvas的动画技术。秒针每秒钟都会移动，所以我们需要使用setInterval()、setTimeout()或requestAnimationFrame()其中的一个来不断更新时钟画面。这些函数都可以让浏览器在指定的时间间隔内重复执行某段代码，从而实现动画效果。

具体来说，我们可以使用setInterval()函数来每隔一定时间（比如10毫秒）就重新绘制一次时钟。在每次重新绘制时钟时，我们需要更新秒针的位置，然后清空画布，再重新绘制时钟的各个部分。

绘制时钟的基本步骤包括：

清除画布：在每次重新绘制时钟之前，我们需要使用clearRect()函数来清除画布上的内容。
绘制时钟的圆盘：使用arc()函数来绘制一个圆形，作为时钟的圆盘。设置填充颜色和描边颜色，以呈现出圆盘的外观。
绘制时针、分针和秒针：根据当前的时间，计算出时针、分针和秒针的位置，并使用moveTo()和lineTo()函数来绘制它们。需要注意的是，由于时钟的圆盘是立体的，所以时针、分针和秒针的颜色可能会有所不同，以呈现出更好的立体效果。
循环执行：使用setInterval()函数来不断重复执行上述步骤，以实现动画效果。

通过这些步骤，我们就可以使用Canvas来绘制一个漂亮的时钟了。

示例效果与源代码：

运行效果

<!DOCTYPE html>
<html>

<head>
    <title>动画(时钟)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,ladder,javascript">
    <script src="./js/helper.js"></script>
</head>

<body style="overflow: hidden; margin:10px;">
    <div style="display: inline-block;">
        <canvas id="canvas" width="500" height="450" style="border:solid 1px #CCCCCC;"></canvas>
    </div>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');

    // 时钟大小
    let x = 250, y = 225, radius = 200;
    // 最后一次绘制时钟的秒数
    let lastSecond = 0;

    // 时钟动起来
    requestAnimationFrame(drawClock);

    /**
     * 绘制时钟函数
     */
    function drawClock() {
        let second = Math.round(Date.now() / 1000);
        // 当前秒数大于上一次绘制时钟的秒数时，重绘时钟
        if (second > lastSecond) {
            lastSecond = second;

            // 清除已有内容
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制背景网格
            drawGrid('lightgray', 10, 10, ctx);

            // 绘制时钟外观
            drawFacade();

            // 绘制时钟刻度
            let min = 60;
            for (let i = 0; i < min; i++) {
                drawScale(x, y, radius, i);
            }

            // 绘制时针、分针、秒针
            drawPointer("h");
            drawPointer("m");
            drawPointer("s");
        }

        // 重绘
        requestAnimationFrame(drawClock);
    }

    /**
     * 绘制时钟外观
     */
    function drawFacade() {
        // 外圈渐变样式
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius + 25);
        gradient.addColorStop(0, "rgb(255,255,255)");
        gradient.addColorStop(0.817, "rgb(255,255,255)");
        gradient.addColorStop(0.837, "rgb(237,237,237)");
        gradient.addColorStop(0.874, "rgb(77,77,77)");
        gradient.addColorStop(0.904, "rgb(236,236,236)");
        gradient.addColorStop(0.969, "rgba(77,77,77,168)");
        gradient.addColorStop(1, "rgba(77,77,77,0)");

        // 绘制外圈
        ctx.save();
        ctx.beginPath();
        ctx.arc(x, y, radius + 10, 0, 2 * Math.PI);
        ctx.fillStyle = gradient;
        ctx.fill();

        // 绘制中心
        ctx.beginPath();
        ctx.fillStyle = "gray";
        ctx.arc(x, y, 10, 0, 2 * Math.PI)
        ctx.fill();
        ctx.restore();
    }

    /**
     * 绘制时针、分针、秒针函数
     */
    function drawPointer(type, value) {
        let deg, beginX, endX;
        let now = new Date();
        ctx.save();

        // 计算时针角度和长度，并设置样式
        if (type == "s") {                    // 秒
            deg = now.getSeconds() * 6 - 90;
            beginX = -30;
            endX = radius - 50;               // 长
            ctx.lineWidth = 4;                // 细
            ctx.strokeStyle = "gold";
        } else if (type == "m") {             // 分
            deg = now.getMinutes() * 6 + (now.getSeconds() / 60 * 6) - 90;
            beginX = -20;
            endX = radius - 70;
            ctx.lineWidth = 6;
            ctx.strokeStyle = "#2400CC";
        } else {                              // 时
            deg = now.getHours() * 30 + (now.getMinutes() / 60 * 30) - 90;
            beginX = -15;
            endX = radius - 90;
            ctx.lineWidth = 8;
            ctx.strokeStyle = "#0018CC";
        }

        // 绘制
        ctx.translate(x, y);
        ctx.rotate(toRadians(deg));
        ctx.beginPath();
        ctx.moveTo(beginX, 0);
        ctx.lineTo(endX, 0);
        ctx.stroke();
        ctx.restore();
    }

    /**
     * 绘制时钟刻度函数
     */
    function drawScale(x, y, radius, min) {
        let deg = min * 6;  // 每分钟为6°
        let len = 20;
        ctx.save();
        // 按时钟中心旋转
        ctx.translate(x, y);
        ctx.rotate(toRadians(deg));

        ctx.beginPath();
        // 5的整数分钟的刻度要长一些粗一些
        if (min % 5 == 0) {
            ctx.lineWidth = 4;
            ctx.moveTo(radius - 30, 0);
        } else {
            ctx.lineWidth = 2;
            ctx.moveTo(radius - 20, 0);
        }
        ctx.lineTo(radius - 8, 0);
        ctx.stroke();
        ctx.restore();

        // 每5分钟显示数字值
        if (min % 5 == 0) {
            ctx.save();
            // 按按时钟中心旋转
            ctx.translate(x, y);
            ctx.rotate(toRadians(deg));
            // 平移至文字所在位置，并反向旋转
            ctx.translate(radius - 45, 0);
            ctx.rotate(toRadians(-deg));
            ctx.fillStyle = "red";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.font = "bold 25px 黑体";
            // 
            ctx.fillText((min > 45 ? (min - 45) : (min + 15)) / 5, 0, 0);
            ctx.restore()
        }
    }

</script>

</html>

尝试一下 »

上一篇：怎么用Canvas实现变形？

下一篇：使用Canvas制作动画时一般会遇到哪些问题？