使用画布中的设置间隔移除重复的时钟指针

Question

是哎，我是画布的新手。我的时钟有问题。在每次通过 setInterval 调用 workinghands(( 函数时，时钟指针都会向前滴答作响，但之前的指针不会被删除。我想取下时钟上重复的指针。在时钟的图像中，你会看到我想要什么。不仅长手重复自己，另外两只手也重复。点击链接查看时钟图像

    function workingHands(context)
    {
        var date = new Date();
        var second = date.getSeconds();
        var minute = date.getMinutes();
        var hour = date.getHours() % 12;
        second = second * Math.PI / 30;
        drawHands(context, second, 125, 2);
        second = date.getSeconds();
        minute = (second * Math.PI / (1800)) + (minute * Math.PI / 30);
        drawHands(context, minute, 100, 5);
        second = date.getSeconds();
        minute = date.getMinutes();
        hour = (second * Math.PI / (10800)) + (minute * Math.PI / 1800) + (hour * Math.PI / 6)
        drawHands(context, hour, 50, 10);
    }
    function drawHands(context, angle, length, width)
    {
        context.translate(18, -7);
        context.beginPath();
        context.moveTo(0, 0);
        context.rotate(angle);
        context.lineTo(0, -length);
        context.lineWidth = width;
        context.lineCap = "round";
        context.stroke();
        context.rotate(-angle);
        context.translate(-18, 7);
    }
    function clockFace(context)
    {
        context.beginPath();
        context.arc(centerX, centerY, 140, 0, 2 * Math.PI);
        context.strokeStyle = "black";
        context.lineWidth = "10";
        context.stroke();
        context.closePath();
        context.beginPath();
        context.arc(centerX, centerY, 5, 0, 2 * Math.PI);
        context.fill = "black";
        context.stroke();
        context.translate(centerX, centerY);
        decorClock(context);
        numbers(context);
    }
    clockFace(context);
    setInterval(workingHands, 1000, context);

Answer 1

关于画布，有一件基本的事情要记住 - 你不能"删除"你已经绘制的任何内容。因此，为了避免这些"重复"，您必须清除所有画布并再次绘制所有内容，或者至少 - 覆盖某些部分 - 如 clockFace。

在您的情况下，它应该是这样的：

function workingHands(context)
{
    clockFace(context);
    var date = new Date();
    var second = date.getSeconds();
    var minute = date.getMinutes();
    var hour = date.getHours() % 12;
    second = second * Math.PI / 30;
    drawHands(context, second, 125, 2);
    second = date.getSeconds();
    minute = (second * Math.PI / (1800)) + (minute * Math.PI / 30);
    drawHands(context, minute, 100, 5);
    second = date.getSeconds();
    minute = date.getMinutes();
    hour = (second * Math.PI / (10800)) + (minute * Math.PI / 1800) + (hour * Math.PI / 6)
    drawHands(context, hour, 50, 10);
}

唯一改变的是"clockFace(context(;"覆盖，在画手之前将表盘涂成白色。

Answer 2

var canvas = document.getElementById('c')
var context = canvas.getContext('2d');
 var centerX = canvas.width/2,
     centerY = canvas.height/2;
function workingHands()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        clockFace();
        var date = new Date();
        var second = date.getSeconds();
        var minute = date.getMinutes();
        var hour = date.getHours() % 12;
        second = second * Math.PI / 30;
        drawHands(context, second, 125, 2);
        second = date.getSeconds();
        minute = (second * Math.PI / (1800)) + (minute * Math.PI / 30);
        drawHands(context, minute, 100, 5);
        second = date.getSeconds();
        minute = date.getMinutes();
        hour = (second * Math.PI / (10800)) + (minute * Math.PI / 1800) + (hour * Math.PI / 6)
        drawHands(context, hour, 50, 10);
    }
    function drawHands(context, angle, length, width)
    {
    
        context.save();
        context.translate(centerX, centerX);
        context.beginPath();
        context.moveTo(0, 0);
        context.rotate(angle);
        context.lineTo(0, -length);
        context.lineWidth = width;
        context.lineCap = "round";
        context.stroke();
        context.closePath();
        context.restore();
    }
    function clockFace()
    {
   
        context.beginPath();
        context.arc(centerX, centerY, 140, 0, 2 * Math.PI);
        context.strokeStyle = "black";
        context.lineWidth = "10";
        context.stroke();
        context.closePath();
        context.beginPath();
        context.arc(centerX, centerY, 5, 0, 2 * Math.PI);
        context.fill = "black";
        context.stroke();
        context.closePath();
    }
    setInterval(workingHands, 1000);

<canvas id='c' width=400 height=400></canvas>

它每次在画布上绘制，因此您需要清除并重新绘制。

context.clearRect(0, 0, canvas.width, canvas.height);