我正在尝试使用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/