html5画布显示网格,在画布HTML5中循环网格，方块之间有“间隙”？

和代码：

$(document).ready(function(){

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

ctx.fillStyle = "rgb(200,0,0)";

ctx.beginPath();

for (var x = 0, i = 0; i < 5; x+=44, i++) {

for (var y = 0, j = 0; j < 5; y+=44, j++) {

ctx.rect (x, y, 40, 40);

}

}

ctx.fill();

ctx.closePath();

});

另一种方式：

$(document).ready(function(){

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

ctx.fillStyle = "rgb(200,0,0)";

for (var x = 0, i = 0; i < 5; x+=44, i++) {

for (var y = 0, j = 0; j < 5; y+=44, j++) {

ctx.fillRect (x, y, 40, 40);

}

}

});

在这两种情况下，我都从ctx.fillStyle块中删除了for以提高性能，因为canvas状态机的更改会减慢绘图过程。

修改强>：

正如评论中的markE所指出的，您也可以使用以下方法：

$(document).ready(function(){

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

var size = 40;

var offset = 4;

ctx.fillStyle = "rgb(200,0,0)";

for (var x = 0; x < 5; x++) {

for (var y = 0; y < 5; y++) {

ctx.fillRect (x*(size+offset), y*(size+offset), size, size);

}

}

});

这只是个人风格的问题！