Question

我有一个装满网络摄像头流的画布。最重要的是，我希望矩形（只是矩形的边框）在随机区域出现1秒钟。所以每一个矩形都会弹出，而下一个矩形会出现在其他地方。目前，矩形每秒出现，但最后一个不会消失。因此，在第二秒有2个矩形，第3个第二个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（），那么矩形的内部也将消失......所以网络摄像头流的一部分也随之消失。

Answer 1

如果您只需要绘制一个矩形，请将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();
}

1秒后隐藏画布ctx.rect（） - Javascript

1 个答案: