个人中心
gpt4 book ai didi

javascript - 为什么这个时钟上没有显示秒针？ (带有 javascript 的 HTML5 cavas 层)

转载 作者：行者123 更新时间：2023-12-05 05:39:20 25 4
gpt4 key购买 nike

我正在使用 HTML5 的 Canvas 和 javascript 制作时钟动画。它应该有三只移动的指针，但似乎只有两只在渲染和工作(小时和分钟)。我没有看到任何运行时错误阻止第三个被渲染。三只手怎么了？

Example Clock顺便说一句，这不是地球时钟，所以数学可能看起来很奇怪。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Wyrdling Clock</title>
</head>
<body onload="init();">
    <div style="position: relative;">
        <canvas id="clock_layer1" width="1080" height="1080" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
        <canvas id="clock_layer2" width="1080" height="1080" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
        <canvas id="clock_layer3" width="1080" height="1080" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
        <canvas id="clock_layer4" width="1080" height="1080" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
    </div>
</body>

<script>
    var clock_face = null,
        hour_hand = null,
        minute_hand = null,
        second_hand = null,
        cycle_hand = null,
        ctx_l1 = null,
        ctx_l2 = null,
        ctx_l3 = null,
        ctx_l4 = null,
        degrees = 0;
    var WyrdTimeStarts = new Date("2019-05-22");

    var HEIGHT = 1080;
    var WIDTH = 1080;
    var HALF_HEIGHT = HEIGHT / 2;
    var HALF_WIDTH = WIDTH / 2;
    var FPS = 15;

    var CIRCLE_TO_HOUR_RATIO = 360 / 9;
    var CIRCLE_TO_MINUTES_RATIO = 360 / 60;
    var CIRCLE_TO_SECOND_RATIO = 360 / 60;
    var CIRCLE_TO_CYCLE_RATIO = 360 / 3;
    var CIRCLE_TO_MS_RATIO = 360 / 60000;

    var DEGRESS_TO_RADIANS = Math.PI / 180;
    var RADIANS_TO_DEGREES = 180 / Math.PI;

    function fCleanCanvas() {
        // clear canvas
        ctx_l1.clearRect(0, 0, HEIGHT, WIDTH);
        ctx_l2.clearRect(0, 0, HEIGHT, WIDTH);
        ctx_l3.clearRect(0, 0, HEIGHT, WIDTH);
        ctx_l4.clearRect(0, 0, HEIGHT, WIDTH);
    } // End function fCleanCanvas

    function fMinuteAngle(currentMinutes) {
        // Calculate the expected angle
        return Math.floor(CIRCLE_TO_MINUTES_RATIO * currentMinutes, 0);
    } // End function fMinuteAngle

    function fHourAngle(currentHours) {
        // Calculate the expected angle
        return Math.floor(CIRCLE_TO_HOUR_RATIO * currentHours, 0);
    } // End function fHourAngle

    function fSecondAngle(currentTime) {
        // Calculate the expected angle
        var secondsToMilliseconds = currentTime.getSeconds() * 1000;
        var totalMilliseconds = currentTime.getMilliseconds() + secondsToMilliseconds;
        return Math.floor(CIRCLE_TO_MS_RATIO * totalMilliseconds, 0);
    } // End function fSecondAngle

    function fDayCycleAngle(currentHours) {
        // Calculate the expected angle
        return Math.floor(((360/3) * (currentHours/9)),0);
    } // End function fDayCycleAngle

    function fDrawAsRotatedInLayer(image, angle, x) {
        switch (x) {
            case 1:
                // Rotate around this point
                ctx_l1.rotate(angle * DEGRESS_TO_RADIANS);

                // Draw the image back and up
                ctx_l1.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
    
                break;
            case 2:
                // Rotate around this point
                ctx_l2.rotate(angle * DEGRESS_TO_RADIANS);

                // Draw the image back and up
                ctx_l2.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
    
                break;
            case 3:
                // Rotate around this point
                ctx_l3.rotate(angle * DEGRESS_TO_RADIANS);

                // Draw the image back and up
                ctx_l3.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
    
                break;
            case 3:
                // Rotate around this point
                ctx_l4.rotate(angle * DEGRESS_TO_RADIANS);

                // Draw the image back and up
                ctx_l4.drawImage(image, 0 - HALF_HEIGHT, 0 - HALF_WIDTH);
    
                break;
            default:
                break;
        }
    } // End function fDrawAsRotatedInLayer

    function draw() {
        var currentTime = new Date();
        var today = new Date();
        var diffMs = (today - WyrdTimeStarts); // milliseconds in the Wyrd so far
        var diffDays = Math.floor(diffMs / 97200000); // Wyrd days
        var diffHrs = (diffMs % 97200000) / 3600000; // hours
        var diffMins = ((diffMs % 97200000) % 3600000) / 60000; // minutes

        fCleanCanvas();

        // Draw the clock background onto canvas layer 1
        ctx_l1.drawImage(clock_face_base, 0, 0);

        // Save canvas layer 1's drawing state
        ctx_l1.save();

        // Move to center point for rotation of hour hand
        ctx_l1.translate(HALF_HEIGHT, HALF_WIDTH);
        fDrawAsRotatedInLayer(hour_hand, fHourAngle(diffHrs), 1);

        // Restore canvas layer 1's previous drawing state
        ctx_l1.restore();



        // Draw the clock's middle layer onto canvas layer 2
        ctx_l2.drawImage(clock_face_mid, 0, 0);

        // Save canvas layer 2's drawing state
        ctx_l2.save();

        // Move to center point for rotation of minute hand
        ctx_l2.translate(HALF_HEIGHT, HALF_WIDTH);
        fDrawAsRotatedInLayer(minute_hand, fMinuteAngle(diffMins), 2);
        
        // Restore canvas layer 2's previous drawing state
        ctx_l2.restore();



        // Save canvas layer 3's drawing state
        ctx_l3.save();

        // Move to center point for rotation of day cycle (shows which 9 hour segment of the 27 hour day is it)
        ctx_l3.translate(HALF_HEIGHT, HALF_WIDTH);
        fDrawAsRotatedInLayer(cycle_hand, fDayCycleAngle(diffHrs), 3);

        // Restore canvas layer 3's previous drawing state
        ctx_l3.restore();



        // Draw the clock's cap onto canvas layer 4
        ctx_l4.drawImage(clock_face_top, 0, 0);

        // Save canvas layer 4's drawing state
        ctx_l4.save();

        // Move to center point for rotation of second hand
        ctx_l4.translate(HALF_HEIGHT, HALF_WIDTH);
        fDrawAsRotatedInLayer(second_hand, fSecondAngle(currentTime), 4);

        // Restore canvas layer 4's previous drawing state
        ctx_l4.restore();



        window.requestAnimationFrame(draw, 1000 / FPS);
        
    } // End function draw

    function imgLoaded() {
        // Image loaded event complete.  Start the timer
        window.requestAnimationFrame(draw, 1000 / FPS);
    } // End function imgLoaded

    function init() {
        // Grab the clock element
        var canvas1 = document.getElementById('clock_layer1');
        var canvas2 = document.getElementById('clock_layer2');
        var canvas3 = document.getElementById('clock_layer3');
        var canvas4 = document.getElementById('clock_layer4');
    
        // Canvas supported?
        if(canvas1.getContext('2d')) {
            ctx_l1 = canvas1.getContext('2d');
            ctx_l2 = canvas2.getContext('2d');
            ctx_l3 = canvas3.getContext('2d');
            ctx_l4 = canvas4.getContext('2d');
    
            // Load the hour hand image
            hour_hand = new Image();
            hour_hand.src = 'Wyrdling Clock - hand 1.png';
    
            // Load the minute hand image
            minute_hand = new Image();
            minute_hand.src = 'Wyrdling Clock - hand 2.png';
    
            // Load the cycle hand image
            cycle_hand = new Image();
            cycle_hand.src = 'Wyrdling Clock - hand 3.png';
    
            // Load the second hand image
            second_hand = new Image();
            second_hand.src = 'Wyrdling Clock - hand 4.png';
    
            // Load the clock face part 2 image
            clock_face_mid = new Image();
            clock_face_mid.src = 'Wyrdling Clock - face 2.png';

            // Load the clock face part 3 image
            clock_face_top = new Image();
            clock_face_top.src = 'Wyrdling Clock - face 3.png';

            // Load the clock face base image
            clock_face_base = new Image();
            clock_face_base.src = 'Wyrdling Clock - face 1.png';
            clock_face_base.onload = imgLoaded;

        } else {
            alert("Canvas not supported!");
        } // End if(canvas1.getContext('2d'))

    } // End function init

</script>
</html>

最佳答案

一旦你看到它，你就会为此踢自己一脚。
查看 fDrawAsRotatedInLayer 中的开关，您有 2 次 case 3:。它永远不会进入秒句柄的分支

关于javascript - 为什么这个时钟上没有显示秒针？ (带有 javascript 的 HTML5 cavas 层)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72724826/

25 4 0
文章推荐： typescript - 数组元素标签为字符串类型
文章推荐： html - 应用 flex-direction 后，如何将我的 div 置于 @media 查询中？
文章推荐： 创建后 Gorm 只读字段
文章推荐： javascript - 如何在 React 中通过 API 请求更新数据后更新状态？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com