调用drawGrid函数绘制向量网格时页面崩溃，求排查原因

安全阿岳

2026-7-9

问题原因与修复方案

核心问题

drawGrid函数里的grid.push(new Array())是导致页面崩溃的直接原因。在遍历grid数组的过程中，每次循环都往grid里添加新的空数组，使得grid.length持续增大，外层for循环永远无法终止，引发无限循环，最终导致页面无响应崩溃。

修复后的关键代码

删除drawGrid中多余的grid.push(new Array())语句即可，修复后的drawGrid函数如下：

function drawGrid() {
    let vector
    for(let i = 0; i < grid.length; i++) {
        for(let j = 0; j < grid[i].length; j++) {
            vector = grid[i][j]
            vector.draw()
            console.log(vector)
        }
    }
}

完整修复代码

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight

class Vector {
    constructor(x, y, magnitude, angle) {
        this.x = x
        this.y = y
        this.mag = magnitude
        this.ang = angle
        this.tx = magnitude * Math.cos(angle) + x
        this.ty = magnitude * Math.sin(angle) + y
    }

    draw() {
        c.beginPath()
        c.moveTo(this.x, this.y)
        c.lineTo(this.tx, this.ty)
        c.stroke()
    }
}

const resolution = 20;

let grid = []

function init() {
    // 创建向量网格
    for(let i = 0; i < canvas.height; i += resolution) {
        grid.push(new Array())
        for(let j = 0; j < canvas.width; j += resolution) {
            grid[i / resolution].push(new Vector(i, j, 7, Math.PI))
        }
    }

    drawGrid()
}

function drawGrid() {
    let vector
    for(let i = 0; i < grid.length; i++) {
        for(let j = 0; j < grid[i].length; j++) {
            vector = grid[i][j]
            vector.draw()
            console.log(vector)
        }
    }
}

// 启动程序
init()