在canvas HTML5中循环使用"gap "广场之间

Looping a grid in canvas HTML5 with "gaps" between squares?

本文关键字：quot gap 之间 HTML5 canvas 循环      更新时间：2023-09-26

我想创建一个5x5的网格，正方形40x40px，中间间隔4px，这是一张图片:

https://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));
        };
    };
});

但它没有工作，我想有一个更简单的方法来做到这一点，但我只是不知道如何!我怎样才能达到预期的结果?

谢谢!

参见

和代码:

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

在这两种情况下，我从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);
        }
    }
});

这只是个人风格的问题!

相关文章：