JavaScript - 如何使用 for 循环和 Canvas 绘制几个形状之间有空格的形状

Question

我正在尝试使用 for 循环绘制一条正方形线。当我说线时，我的意思是我希望一个方 block 与另一个方 block 相邻，但它们之间有一个空间。

我尝试了下一个代码 -

html 部分 -

<canvas id="myCan" height="300px" width="300px"></canvas>

和脚本部分 -

        $(document).ready(function () {
        var canvas = document.getElementById("myCan");
        var ctx = canvas.getContext("2d");


        var positionx = 50;
        var positiony = 50;
        var i = 0;
        for (i; i < 20; i++) {

            ctx.fillStyle = "rgb(255, 0, 0)";
            ctx.fillRect(positionx, positiony, 50, 50);

            positionx += 2;


        }


    });

问题是我得到了一条简单的线 - 意味着方 block 之间没有空间。

我该如何修复它？

感谢您的帮助

Answer 1

将 positionx += 2; 更改为 positionx += 52;

目前您告诉浏览器的是:绘制此形状 50 px 宽，然后向右移动 2 px 并绘制下一个 50 px 宽的形状。你想要的是:绘制这个形状 50 px 宽，然后向右移动 50px+X 并绘制下一个形状。

工作 fiddle : http://jsfiddle.net/34zcda9q/