javascript - 1秒后隐藏 Canvas ctx.rect()-Javascript

我有一个画布，上面装有网络摄像头流。
最重要的是，我想让矩形（只是矩形的边界）在随机区域出现1秒钟。因此，每一秒钟都会弹出一个矩形，下一个矩形将出现在其他位置。
当前，矩形每秒钟出现一次，但最后一个不消失。因此，在第二秒有2个矩形，第三秒有3个矩形，依此类推...
我需要找到一种方法使矩形显示1秒钟，在1秒钟后将其删除，或在1秒钟后将其移动：结果对我来说是相同的。

let sx; // x axis
let sy; // y axis
let i = setInterval( axisChanger, 1000 ); // pops up every second

function axisChanger() {
  sx = getRandomInt(0, 535); // gets a random num
  sy = getRandomInt(0, 445); // gets a random num
}

requestAnimationFrame(animate);

function animate(t) {
  requestAnimationFrame(animate);
  randomRect();
}

function randomRect() {
  ctx.rect(sx, sy, 50, 30); // these 4 lines make a hollow rectangle: border only.
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#FF0000';
  ctx.stroke();
}

如果我使用clearRect（），则矩形的内部也将消失……因此，网络摄像头流的一部分也随之消失。

最佳答案

如果只需要绘制一个矩形，请将rect()和stroke()替换为strokeRect()：

function randomRect() {
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#FF0000';
  ctx.strokeRect(sx, sy, 50, 50);
}

当前行为的原因是rect()添加到主路径并累积所有rect()调用。因此，必须使用beginPath()清除路径。

但是，由于仅使用单个矩形，因此可以简单地使用strokeRect()，它不会向路径添加任何内容，而是直接进行渲染。

但是，替代方法是：

function randomRect() {
  ctx.beginPath();          // clear path and sub-paths
  ctx.rect(sx, sy, 50, 30); // these 4 lines make a hollow rectangle: border only.
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#FF0000';
  ctx.stroke();
}