为什么在 for 循环中在 JS canvas 上绘制任何内容会导致页面无休止地加载？

Question

这是我能想出的最简单的代码来说明问题：

<!DOCTYPE html>
<html>
    <body>
        <canvas id="canvas" width="7" height="7"></canvas>
        
        <script>
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            for (i = 1; i < 2; i+2){
                context.fillRect(1,i,5,1);
            }
        </script>
    </body>
</html>

一旦我尝试在 for 循环中对 canvas 执行任何操作，页面就会无休止地加载并且我的电脑开始发出大量噪音。出了什么问题，我该如何解决？

解决方案

初学者错误：i+2 应该是 i+=2。（如果增量为 2，i < 2 也没有意义。）

Answer 1

错误在于你的递增表达式。将 i+2 替换为 i+=2，它应该可以正常工作。

为什么在 for 循环中在 JS canvas 上绘制任何内容会导致页面无休止地加载？

Why does drawing anything on a JS canvas in a for loop cause the page to load endlessly?

javascript

canvas