使畫布HTML5中的網格在兩個正方形之間帶有“間隙”嗎？

Question

我想創建5x5的網格，其中40x40px的正方形之間有4px的間隙，這是一張圖片：

http://i.stack.imgur.com/hu96a.png

所以我打算做這樣的事情：

$(document).ready(function(){
    var ctx = document.getElementById('grid').getContext('2d');
    for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 5; x++) {
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect ((40*y)+4*(y+1),(40*x)+4*(x+1),40*(y+1)+4*(y+1),40*(x+1)+4*(x+1));
        };
    };
});

但這沒有用，我想有一種更簡單的方法可以做到，但是我不知道怎么做！ 如何獲得理想的結果？

謝謝！

Answer 1

看到小提琴 ，

和代碼：

$(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塊中刪除了ctx.fillStyle以提高性能，因為畫布狀態機的更改會減慢繪制過程。

編輯 ：

正如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);
        }
    }
});

這只是個人風格的問題！