Question

谢，我是帆布新手。我的时钟问题。每次通过setInterval调用workinghands（）函数时，时钟指针向前拨动，但之前的指针不会被移除。我想在时钟上移除重复的手。在时钟的形象中，你会看到我想要的东西。不仅长手重复自己，还有另外两手。 click the link to view image of clock

    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

关于画布需要记住一个基本的事情 - 你不能去掉＆＃34;去除＆＃34;你已经画过的东西。所以，要避免那些＆＃34;重复＆＃34;你必须清除所有画布并再次绘制所有内容，或者至少 - 覆盖一些部分 - 如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);
}

唯一改变的是＆＃34; clockFace（context）;＆＃34;在绘图之前，将绘图表面涂成白色。

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);

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

2 个答案: