html - Canvas 时钟

Question

我在 Canvas 上做了一个时钟，我实际上是在 Canvas 上从中心画线，每一秒我从中心画一条线在一个圆圈里，我最终在时钟上画了秒线。我如何清除之前绘制的线，使其看起来像一个真正的时钟。

非常感谢帮助

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

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