Question

我在画布上画画时间，但是当时间改变时，它会再画画。我正在考虑擦除画布，但我还有其他东西。

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();

  m = checkTime(m);
  s = checkTime(s);
  ctx.font="20px Arial";
  ctx.fillText(h + ':' + m, 4, 24); 
  var t = setTimeout(startTime, 500);
}

function checkTime(i) {
  if (i < 10) {i = "0" + i};
  return i;
}

有任何帮助吗？谢谢！

Answer 1

无需擦除整个画布，而是使用clearRect()仅清除画布中要绘制新时间的部分

context.clearRect（X，Y，宽度，高度）;

ctx.clearRect(4,24,100,50); // clear old time
ctx.font="20px Arial";
ctx.fillText(h + ':' + m, 4, 24);  //draw new time

Answer 2

以下是您可以稍微修改代码的方法。请注意，您实际上从不重绘任何内容，只需在另一个上面绘制一个数字。您会注意到，如果您让代码运行，则数字会叠加在一起。

如果使用clearRect，则可以重绘由所需像素尺寸定义的画布的一部分。运行此示例代码段，您将看到，只有时间被重新绘制（否则矩形将消失）

var ctx = document.getElementById('time').getContext('2d');
ctx.rect(0, 75, 25, 25)
ctx.rect(75, 0, 25, 25)
ctx.rect(75, 75, 25, 25)
ctx.stroke()

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();

  m = checkTime(m);
  s = checkTime(s);
  ctx.clearRect(0, 0, 50, 30); // <- point of interest
  ctx.font="20px Arial";
  ctx.fillText(h + ':' + m, 4, 24); 
  var t = setTimeout(startTime, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

startTime()

<canvas id='time' width="100" height="100"></canvas>

Answer 3

使用clearRect仅清除部分画布。在下面的示例中，我使用measureText来获取显示的文本的确切宽度。我已经对已清除区域的高度进行了硬编码，但可以获得it is complicated的高度。

N.B。为了更快地获得反馈，我还在显示屏上添加了秒数。

＆＃13;

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var previousTextMetrics = null;

startTime();

function startTime() {
  //clear the previously displayed text
  if (previousTextMetrics) {
    ctx.clearRect(4, 4, previousTextMetrics.width, 20);
  }

  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  ctx.font = "20px Arial";
  var text = h + ':' + m + ':' + s;
  ctx.fillText(text, 4, 24);
  //read metrics, including the width of the text
  previousTextMetrics = ctx.measureText(text);

  var t = setTimeout(startTime, 500);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i
  };
  return i;
}

＆＃13;

<canvas></canvas>

＆＃13;

画布 - 抽奖时间

3 个答案: