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

我有一个充满摄像头流的画布。最重要的是，我想让矩形（只是矩形的边框）在随机区域出现1秒钟。所以每隔一秒会出现一个矩形，下一个将会出现在其他地方。目前，矩形每秒出现，但最后一个不会消失。因此，在第二秒中有2个矩形，3秒3个矩形等等。我需要找到一种方法，让矩形出现1秒钟，让它在1秒后移除，或者让它在1秒后移动第二：结果对我来说是一样的。1秒后隐藏画布ctx.rect（） - Javascript

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（），然后是矩形的内部也将消失......与它的摄像头流，这样一部分。

来源

2017-08-24 Maxime Dore

如果你只需要绘制一个矩形，与strokeRect()取代rect()和stroke()：

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(); 
}

来源

2017-08-24 13:21:21 K3N

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

回答

相关问题