Html 5网格绘制问题

Html 5 Grid Drawing Problem

本文关键字：问题 绘制 网格 Html      更新时间：2023-09-26
    //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);

这段代码似乎占用了很多内存，有人知道为什么吗?刚开始用html5编程…我相信这和update_grid函数中的for循环有关，谢谢

只是一个建议，你在循环中做了很多计算，你的setInterval周期很短-你需要如此频繁地更新你的网格吗?

在你的draw_grid()函数你计算大小*金额3次，为什么不做一次在循环的外部作为一个局部变量和重用该变量，你需要它?

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

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

这两个变量的声明都没有使用var关键字…这样做是危险的，并且可能导致内存泄漏，这取决于您如何使用它们。

这是前进的方向:

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

另外，最好不要访问全局变量，因为JavaScript VM必须进行查找，这是相当昂贵的。一个更好的方法是这样做:

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

然后使用当前作用域中已经存在的必要参数调用该方法:

on_enter_frame(context, game_area, board);
相关文章：