以下代码(jsFiddle)在画布上的任意点绘制一个红色正方形,注意擦除上一个正方形(通过在其上面用ctx.fillRect()
填充一个白色正方形:
<html>
<canvas id='canvas' width=300 height=300/>
<script>
const ctx = document.getElementById('canvas').getContext('2d');
let prevRect = null;
for (let i = 0 ; i < 10; i++) {
if (prevRect != null) {
ctx.fillStyle='white';
ctx.fillRect(prevRect.x, prevRect.y, 50, 50);
}
ctx.fillStyle='red';
const newRect = {x: Math.random()*(300-50), y: Math.random()*(300-50)};
ctx.fillRect(newRect.x, newRect.y, 50, 50);
prevRect = newRect;
}
</script>
</html>
该代码无法完全擦除先前的正方形,并且在屏幕上仍然留有伪像。相反,如果执行以下操作:
const newRect = {x: Math.floor(Math.random()*(300-50)), y: Math.floor(Math.random()*(300-50))};
...然后一切都会按预期进行。
我的问题是为什么。似乎完全没有必要在将值保留在prevRect
中时截断,因此对fillRect()
的两个调用使用完全相同的坐标(即使使用浮点数也是如此),因此两个正方形应始终完全对齐。
如果您画10个白框而不是一个,那么问题就消失了。或者,如果您将白框设置为大0.5像素,则可能会有所帮助。