HTML5 Canvas窗口Resize后无法绘制问题求助

嗨，我发现你的问题出在**firstRowX和secondRowX没有在每次重绘时重置初始值**！

每次调用redraw()函数时，你都会让firstRowX = firstRowX + 10和secondRowX = secondRowX + 10，但没有把它们重置回初始的0和5。第一次绘制完成后，这两个变量已经变成了画布的宽度值（因为repetitions = canvass.width /10，循环repetitions次后，firstRowX刚好等于canvass.width）。等resize后再次调用redraw()，循环里绘制的矩形全部都在画布外面了，所以看起来就是空白的——而调整过程中偶尔能看到，是因为resize事件会触发多次，某次执行时变量还没累加太夸张，但最终结束后就完全超出画布了。

另外，redraw()里不需要重复获取canvass和ctx，外面已经定义过这些变量了，重复获取反而容易引发不必要的问题。

下面是修正后的代码：

var canvass = document.getElementById('zipper-canvas');
var ctx = canvass.getContext('2d');
var repetitions;
var firstRowX = 0;
var firstRowY ;
var secondRowX = 5;
var secondRowY ;

$(function() {
    initCanvas();
    redraw();
    window.addEventListener('resize', resizecanvass, false);

    function resizecanvass() {
        initCanvas();
        redraw();
    }

    // 把初始化画布尺寸和变量的逻辑抽出来，避免重复代码
    function initCanvas() {
        canvass.width = window.innerWidth;
        repetitions = canvass.width / 10;
        canvass.height = 30;
        // 重置ctx（因为修改canvas宽高会清空画布并重置上下文）
        ctx = canvass.getContext('2d');
        firstRowY = canvass.height / 2 - 3;
        secondRowY = canvass.height / 2 + 1;
    }

    function redraw() {
        // 关键：每次重绘前重置X坐标的初始值！
        firstRowX = 0;
        secondRowX = 5;
        
        ctx.clearRect(0, 0, canvass.width, canvass.height);
        console.log(repetitions);
        
        for (var r = 0; r < repetitions; r++) {
            ctx.beginPath();
            ctx.rect(firstRowX, firstRowY, 5, 5);
            ctx.fillStyle = "#edeeef";
            ctx.fill();
            ctx.closePath();
            firstRowX = firstRowX + 10;
        }
        
        for (var r2 = 0; r2 < repetitions; r2++) {
            ctx.beginPath();
            ctx.rect(secondRowX, secondRowY, 5, 5);
            ctx.fillStyle = "#a2a3a5";
            ctx.fill();
            ctx.closePath();
            secondRowX = secondRowX + 10;
        }
    }
});

我还把初始化画布的逻辑抽成了initCanvas()函数，这样resize和初始加载时的代码可以复用，更简洁。现在每次resize后，redraw()都会把X坐标重置回初始值，绘制的矩形就会正确显示在画布范围内了。

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