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