Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/414.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在这种情况下，为什么clearRect不能正常工作？_Javascript_Canvas - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 在这种情况下，为什么clearRect不能正常工作？

Javascript 在这种情况下，为什么clearRect不能正常工作？

javascript canvas

Javascript 在这种情况下，为什么clearRect不能正常工作？,javascript,canvas,Javascript,Canvas,这就是我所拥有的，但是clearRect并没有像我期望的那样工作。箱子上留下了痕迹 <canvas id="canvas"></canvas> <script> var ctx = document.getElementById('canvas').getContext("2d"); var x=0; !function loop() { requestAnimationFrame(loop); ctx.clearRect(0, 0, c

这就是我所拥有的，但是
clearRect
并没有像我期望的那样工作。箱子上留下了痕迹

<canvas id="canvas"></canvas>

<script>

var ctx = document.getElementById('canvas').getContext("2d");

var x=0;
!function loop() {
    requestAnimationFrame(loop);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.rect(x++, 10, 80, 80);
    ctx.stroke();
}();

</script>


var ctx=document.getElementById（'canvas'）.getContext（“2d”）；
var x=0；
!函数循环（）{
请求动画帧（循环）；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
rect（x++，10，80，80）；
ctx.stroke（）；
}();

问题与
ctx.clearRect
无关


ctx.rect
将添加到，但您永远不会开始或结束一个新路径，因此对
ctx.rect
的所有调用都将添加到同一路径，累积矩形

开始和结束新路径：


ctx.beginPath();
ctx.rect(x++, 10, 80, 80);
ctx.closePath();
ctx.stroke();


或使用：


ctx.strokeRect(x++, 10, 80, 80);