如何在 HTML5 Canvas 中制作动态圆形时钟

Question

我想使用<canvas> 用 HTML 和 JS 制作一个圆形时钟。 我写了这段代码：

function updateClock ()
    {
        // Variables for the time
        var currentTime = new Date();

        var currentHours = currentTime.getHours();
        var currentMinutes = currentTime.getMinutes();
        var currentSeconds = currentTime.getSeconds();
        // Convert time variable in RADs
        var RADcurrentTime = {
            hours : currentHours * Math.PI * 2 / 24,
            minutes : currentMinutes * Math.PI * 2 / 60,
            seconds : currentSeconds * Math.PI * 2 / 60
        };
        // Compose the circle clock
        var clock_canvas = document.getElementById("clock");
        var context = clock_canvas.getContext("2d");

        var hours_radius = 70;
        context.beginPath();
        context.arc(screen.availWidth/2, screen.availHeight/2, hours_radius, 0, RADcurrentTime.hours);
        context.closePath();
        context.lineWidth = 3;
        context.stroke();

        var minutes_radius = 50;
        context.beginPath();
        context.arc(screen.availWidth/2, screen.availHeight/2, minutes_radius, 0, RADcurrentTime.minutes);
        context.closePath();
        context.lineWidth = 3;
        context.stroke();

        var seconds_radius = 30;
        context.beginPath();
        context.arc(screen.availWidth/2, screen.availHeight/2, seconds_radius, 0, RADcurrentTime.seconds);
        context.closePath();
        context.lineWidth = 3;
        context.stroke();
        `

但它不起作用。我输入了身体标签onload="updateClock(); setInterval('updateClock()', 1000 )"，它仍然不起作用。我唯一得到的是白屏... 任何人都可以帮我提出原因吗？

Answer 1

您不是相对于画布而是相对于屏幕绘制内容，这可能会导致非常不同的偏移量。

如果您的画布宽和高为 200 像素，而您的屏幕为 1920x1080，那么其中一半将从中心点 960、540 绘制时钟，即。超出（此处）200x200 画布的限制。

而不是这个：

context.arc(screen.availWidth/2,screen.availHeight/2, hours_radius, 0, RADcurrentTime.hours);

使用这样的东西（假设画布是方形的）：

context.arc(canvas.width/2, canvas.height/2,hours_radius,0,RADcurrentTime.hours);
            ^^^^^^^^^^^^    ^^^^^^^^^^^^^

您还可以从 this answer 获得一些有用的信息。