一个简单的时钟程序

最新推荐文章于 2023-02-25 16:41:01 发布

不见长安见晨雾

最新推荐文章于 2023-02-25 16:41:01 发布

阅读量336

点赞数

分类专栏： # Canvas 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/fengsheng5210/article/details/128930726

版权

Canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!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>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            FONT_HEIGHT = 15,
            MARGIN = 35,
            HAND_TRUNCATION = canvas.width / 25,
            HOUR_HAND_TRUNCATION = canvas.width / 10,
            NUMERAL_SPACING = 20,
            RADIUS = canvas.width / 2 - MARGIN,
            HAND_RADIUS = RADIUS + NUMERAL_SPACING;

        // Function.......
        /**
         * 绘制一个表示钟面的圆形
         * 先调用beginPath()来定义开始路径，然后调用arc()来创建一个圆形的路径，等调用stroke()方法之后，刚才定义的路径才会变得可见
         */
        function drawCircle() {
            context.beginPath();
            context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
            context.stroke();
        }
        /**
         * 绘制钟面周围的数字，fillText()这个方法是用来在canvas中进行文本填充的。
         * 与arc()方法不同，fillText()方法并不会创建路径，而是立即将文本渲染到canvas之上。
         */
        function drawNumerals() {
            var numerals = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                angle = 0,
                numeralWidth = 0;
            numerals.forEach(function (numeral) {
                angle = Math.PI / 6 * (numeral - 3);
                numeralWidth = context.measureText(numeral).width;
                context.fillText(numeral, canvas.width / 2 + Math.cos(angle) * HAND_RADIUS - numeralWidth / 2,
                    canvas.height / 2 + Math.sin(angle) * HAND_RADIUS + FONT_HEIGHT / 3);
            });
        }
        // 绘制时钟中心的小实心圆
        function drawCenter() {
            context.beginPath();
            context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
            context.fill();
        }
        /**
         * 绘制钟表指针
         * 先调用moveTo()方法将画笔移动到canvas中的指定地点，
         * 然后调用lineTo()方法，在该点与另外一个指定的点之间绘制一条不可见的路径，
         * 最后使用stroke()方法将当前路径变为可见。
         */
        function drawHand(loc, isHour) {
            var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
                handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : RADIUS - HAND_TRUNCATION;
            context.moveTo(canvas.width / 2, canvas.height / 2);
            context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, canvas.height / 2 + Math.sin(angle) * handRadius);
            context.stroke();
        }

        function drawHands() {
            var date = new Date,
                hour = date.getHours();
            hour = hour > 12 ? hour - 12 : hour;

            drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);
            drawHand(date.getMinutes(), false, 0.5);
            drawHand(date.getSeconds(), false, 0.2);
        }

        // 使用clearRct()方法来擦除canvas，然后再重绘时钟。
        function drawClock() {
            context.clearRect(0, 0, canvas.width, canvas.height);

            drawCircle();
            drawCenter();
            drawHands();
            drawNumerals();
        }

        // Initialization.............
        // 程序通过setInterval()方法来制作时钟的动画效果。该方法每秒钟都会调用一次drawClock()函数。
        context.font = FONT_HEIGHT + 'px Arial';
        loop = setInterval(drawClock, 1000);
    </script>
</body>
</html>