Javascript HTML5网格绘制问题 //设置线路板的行数和列数 var行=10； var列=10； var偏移=0.5； //创建板，将随机方块设置为障碍物 var board=[]； 对于（变量x=0；x

只是一个建议，您在循环中进行了大量计算，并且您的setInterval周期非常短-您需要如此频繁地更新网格吗

在draw_grid（）函数中，您要计算3次size*amount，为什么不在循环外部将其作为局部变量执行一次，并在需要时重用该变量

绘画的另一种方式可能是使用，如果你需要如此频繁地绘画，它可能会更有效

    //Set the number of rows and columns for the board
var rows = 10;
var columns = 10;
var offset= 0.5;

//Create the board, setting random squares to be obstacles
        var board = [];

for (var x = 0; x < columns; x++)
        {
            board[x] = [];

            for (var y = 0; y < rows; y++)
            {
                    board[x][y] = 0;
            }
        }

function draw_grid(size, amount, ctx){
    ctx.strokeStyle = "#FFF";
    for (var i=0.5; i<size*amount+1; i+=size){
        ctx.moveTo(0,i);
        ctx.lineTo(size*amount, i);
        ctx.moveTo(i,0);
        ctx.lineTo(i, size*amount);
        ctx.stroke();
    }
}

function update_grid(grid, ctx){
    ctx.fillStyle = "#000";
    for (var i=0; i<grid.length; i+=1){
        for (var a=0; a<grid[i].length; a+=1){
            if (grid[i][a]==1){
                ctx.fillRect((i*32)+offset, (a*32)+offset, 32, 32);
            }
        }
    }
}

game_area = document.getElementById("a");
context = game_area.getContext('2d');
board[0][3] = 1;

function on_enter_frame(){

    context.clearRect(0,0, game_area.width, game_area.height);
    context.fillStyle = "#28F";
    context.fillRect(0,0,500,500);
    draw_grid(32, 10, context);
    update_grid(board, context);

}

setInterval(on_enter_frame,30);

这两个变量都是在不使用var关键字的情况下声明的……这样做很危险，并且可能会导致内存泄漏，具体取决于您使用它们的方式

这是前进的方向：

game_area = document.getElementById("a");
context = game_area.getContext('2d');

另外，最好不要访问全局变量，因为JavaScript虚拟机必须进行代价高昂的查找。更好的方法是：

var game_area = document.getElementById("a");
var context = game_area.getContext('2d');

然后使用当前作用域中已存在的所需参数调用该方法：

function on_enter_frame(pContext, pGame_area, pBoard){

    pContext.clearRect(0,0, pGame_area.width, pGame_area.height);
    pContext.fillStyle = "#28F";
    pContext.fillRect(0,0,500,500);
    draw_grid(32, 10, pContext);
    update_grid(pBoard, pContext);

}

---

既然您将其标记为

lag

，您的意思是它很慢还是真的占用了大量内存？“在html5中编程”您在中编程，HTML5是DOM的指定，它是被操纵的…延迟的意思是这会消耗太多内存，最终导致firefox崩溃…谢谢，通过降低fps和创建背景画布来解决。出于某种原因，这种格式：setInterval（在输入帧（上下文、游戏区域、棋盘），30）不起作用。你能告诉我为什么会发生这种情况吗？setInterval（在输入帧（上下文、游戏区域、棋盘）上）不起作用，因为你不是要求setInterval每隔30毫秒用这些参数调用该方法，而是要求它：1：在输入帧（上下文、游戏区域、棋盘）上调用2:setInterval调用on_enter_frame（上下文、游戏区、棋盘）的结果-这不是函数setInterval的正确用法是传递函数，而不是函数调用的结果。

on_enter_frame(context, game_area, board);