1秒后隐藏画布ctx.rect() - Javascript

时间:2017-08-24 12:48:53

标签: javascript animation canvas

我有一个装满网络摄像头流的画布。 最重要的是,我希望矩形(只是矩形的边框)在随机区域出现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(),那么矩形的内部也将消失......所以网络摄像头流的一部分也随之消失。

1 个答案:

答案 0 :(得分: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();
}