Question

我在画布上做了一个时钟，我实际上是在画布上从中心画线，每隔一秒我从一个圆圈的中心画一条线，我的时间点就是秒钟线。我如何清除以前绘制的线条，使其看起来像一个真正的时钟。

非常感谢谢谢

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

for (i = 0; i < 360; i += 10) {
  ctx.moveTo(i + 5, 180);
  ctx.lineTo(i, 180);

}
for (i = 0; i < 360; i += 10) {
  ctx.moveTo(180, i + 5);
  ctx.lineTo(180, i);

}

ctx.stroke();

var iSin = 0,
  counterSin = 0,
  xSin = 180,
  ySin = 0;
var iCos = 0,
  counterCos = 0,
  xCos = 0,
  yCos = 180;
var iCircle = 0,
  counterCircle = 0,
  xCircle = 180,
  yCircle = 0;
var iLinesInCircle = 0,
  counterLinesInCircle = 0,
  xLinesInCircle = 180,
  yLinesInCircle = 0;
var iMinutes = 0,
  counterMinutes = 0,
  xMinutes = 180,
  yMinutes = 0;
var iHours = 0,
  counterHours = 0,
  xHours = 180,
  yHours = 0;
var increase = 90 / 180 * Math.PI / 9;
var increaseLinesInCircle = 6 * Math.PI / 180;
var increaseMinutes = 6 * Math.PI / 180;
var increaseHours = 6 * Math.PI / 180;
//drawSineWave();
//drawCosineWave();
//drawCircle();
drawLinesInCircle();
drawMinutes();
drawHours();

function drawSineWave() {
  ctx.beginPath();
  ctx.strokeStyle = ("#0C620B");
  ctx.lineWidth = 1;
  ctx.moveTo(xSin, ySin);
  xSin = 180 + Math.sin(counterSin) * 180;
  ySin = iSin;
  counterSin += increase;
  ctx.lineTo(xSin, ySin);
  ctx.stroke();
  iSin += 10;
  if (iSin <= 360) {
    setTimeout(drawSineWave, 100);
  }
}


function drawCosineWave() {
  ctx.beginPath();
  ctx.strokeStyle = ("#BE1616");
  ctx.lineWidth = 1;
  ctx.moveTo(xCos, yCos);
  xCos = iCos;
  yCos = 180 - Math.cos(counterCos) * 180;
  counterCos += increase;
  ctx.lineTo(xCos, yCos);
  ctx.stroke();
  iCos += 10;
  if (iCos <= 360) {
    setTimeout(drawCosineWave, 100);
  }
}

function drawCircle() {
  ctx.beginPath();
  ctx.strokeStyle = ("#021A02");
  ctx.lineWidth = 1;
  ctx.moveTo(xCircle, yCircle);
  xCircle = 180 + Math.sin(counterCircle) * 180;
  yCircle = 180 - Math.cos(counterCircle) * 180;
  counterCircle += increase;
  ctx.lineTo(xCircle, yCircle);
  ctx.stroke();
  iCircle += 10;
  if (iCircle <= 360) {
    setTimeout(drawCircle, 100);
  }
}

function drawLinesInCircle() {

  var ctxline = c.getContext("2d");
  //ctxline.restore();
  ctxline.beginPath();
  ctxline.strokeStyle = ("#EDDE54");
  ctxline.lineWidth = 1;
  ctxline.moveTo(180, 180);
  xLinesInCircle = 180 + Math.sin(counterLinesInCircle) * 180;
  yLinesInCircle = 180 - Math.cos(counterLinesInCircle) * 180;
  counterLinesInCircle += increaseLinesInCircle;
  ctxline.lineTo(xLinesInCircle, yLinesInCircle);
  ctxline.stroke();
  //ctxline.clearRect(0,0,360,360 );
  iLinesInCircle += 6;
  if (iLinesInCircle <= 360) {
    setTimeout(drawLinesInCircle, 1000);
  }
}

function drawMinutes() {
  ctx.beginPath();
  ctx.strokeStyle = ("#545EED");
  ctx.lineWidth = 5;
  ctx.moveTo(180, 180);
  xMinutes = 180 + Math.sin(counterMinutes) * 160;
  yMinutes = 180 - Math.cos(counterMinutes) * 160;
  counterMinutes += increaseMinutes;
  ctx.lineTo(xMinutes, yMinutes);
  ctx.stroke();
  iMinutes += 6;
  if (iMinutes <= 360) {
    setTimeout(drawMinutes, 60000);
  }
}

function drawHours() {
  ctx.beginPath();
  ctx.strokeStyle = ("#BE1616");
  ctx.lineWidth = 7;
  ctx.moveTo(180, 180);
  xHours = 180 + Math.sin(counterHours) * 120;
  yHours = 180 - Math.cos(counterHours) * 120;
  counterHours += increaseHours;
  ctx.lineTo(xHours, yHours);
  ctx.stroke();
  iHours += 6;
  if (iHours <= 360) {
    setTimeout(drawHours, 3600000);
  }
}

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

Answer 1

最简单的可能是首先在画布的背景颜色中绘制相同的线条，然后绘制下一条线。

Answer 2

有一个全局超时，每秒超时，并增加一些全局变量，跟踪已经过了多少秒，分钟和小时。

概念上像这样...... （未经测试）

var second = 0;
var minute = 0;
var hour = 0;

setTimeout(tick, 1000);

function tick() {

    // Clear the canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the clock background or anything else first
    drawBackground();

    // Increment the seconds and check if a minute has been reached
    if (++second == 60) {

        // Increment the minutes and check if an hour has been reached
        if (++minute == 60) {

            // Increment the hours and check if it has reached 12 again
            if (++hours == 12) {
                hour = 0;
            }
            // Overlay the hour hand, using the hours variable
            drawHourHand(hour);

            // Reset the minute counter
            minute = 0;
        }

        // Overlay the minute hand, using the minutes variable
        drawMinuteHand(minute);

        // Reset the second counter
        second = 0;
    }

    // Overlay the second hand, using the seconds variable
    drawSecondHand(second);
}

然后，您可以从一个地方全局控制您的计时，每次计时时，您都会在新的位置重新绘制画布上的元素。

您需要将时序变量插入到绘图函数中，以便直接用于计算手应放在钟面上的角度。

function drawSecondHand(seconds) {
    var degrees = seconds * 6;
    // Convert to radians and draw your line, etc...
}

在上面的函数中，您使用来自全局时间的秒变量计算线角度。

1 second = 6 degrees
2 second = 12 degrees
3 second = 18 degrees
...
58 second = 348 degrees
59 second = 354 degrees
60 second (reset to 0 second) = 0 degrees
1 second = 6 degrees
2 second = 12 degrees
...

Answer 3

你应该有一个调用脚本中每个函数的main函数。每次屏幕都应该清除此功能。

例如：

/*

  Your script here

                   */

function draw() {
    ctx.save();
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

    //draw
    drawSineWave();
    drawCircle();
    drawLinesInCircle()
    drawMinutes();
    drawHours();


    ctx.restore();
}
var animateInterval = setInterval(draw,0);

如果这对您有用，请告诉我

时钟在画布上

3 个答案: