我正在尝试使用for循环绘制一条正方形线。
当我说线条时,我的意思是我想要一个正方形与另一个正方形相邻,但它们之间留有间隔。

我尝试了下一个代码-

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;


        }


    });


问题是我得到一条简单的Line,这意味着正方形之间没有空格。

我该如何解决?

谢谢你的帮助

最佳答案

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

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

工作提琴:
http://jsfiddle.net/34zcda9q/

10-05 20:54
查看更多