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 获得一些有用的输入。

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

1 个答案: