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

See the Fiddle，

和代码：

$(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); } } });

这只是个人风格的问题！

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

1 个答案: