HTML Canvas网格线条颜色在窗口resize时意外变更问题求助

这个问题我之前也碰到过，核心原因其实很简单：当你重新设置canvas的width或height属性时，整个画布的上下文（ctx）会被完全重置，包括你之前设置的所有样式（比如strokeStyle、lineWidth这些）都会回到默认值。你初始加载时设置了线条颜色，但resize事件里只重置了画布尺寸，没有重新设置样式，所以绘制出来的线条就变成了默认的黑色（或其他初始样式），看起来像是颜色“莫名变化”了。

修复步骤 #

• 把绘制网格的逻辑封装成独立函数：这样无论是初始化还是resize后，都能复用相同的绘制逻辑，确保样式和绘制步骤一致。
• 在resize事件里，重置尺寸后重新调用绘制函数：同时别忘了在函数里重新设置你的线条颜色、宽度等样式属性。

修正后的代码示例 #

// 获取canvas元素并初始化上下文
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

// 封装绘制网格的函数
function drawGrid() {
    // 清空画布，防止重绘时出现残留内容
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 重新设置网格线样式（替换成你需要的颜色/宽度）
    ctx.strokeStyle = '#cccccc';
    ctx.lineWidth = 1;
    
    // 绘制横向网格线
    for (let y = 0; y <= canvas.height; y += 20) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }
    
    // 绘制纵向网格线
    for (let x = 0; x <= canvas.width; x += 20) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
}

// 初始化画布尺寸并绘制网格
function initCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    drawGrid();
}

// 页面加载时初始化
initCanvas();

// 监听窗口resize事件，重新初始化画布
window.addEventListener('resize', initCanvas);

关键说明 #

每次resize时，我们先重置canvas的尺寸，再调用drawGrid()函数——这个函数里会重新设置strokeStyle等样式属性，确保绘制出来的网格颜色和初始状态完全一致。加上clearRect()是为了避免resize时旧的网格线残留，让重绘的效果更干净。

这样修改后，无论窗口怎么调整大小，网格线的颜色都会保持你设置的样式，不会再出现莫名变化的情况啦！

内容的提问来源于stack exchange，提问作者eeze