我想要完成的只是在调整大小后在 Canvas 上重新绘制一些内容。我的问题是， Canvas 调整大小后，上面似乎什么也没有出现。我尝试在调整大小处理程序中放置一些简单的代码来绘制矩形，我注意到矩形在窗口调整大小期间出现，然后 Canvas 留空。下面是我的代码。

    var canvass = document.getElementById('zipper-canvas'); 
    var ctx = canvass.getContext('2d'); 
    var repetitions; 
 
    var firstRowX = 0; var firstRowY ; 
    var secondRowX = 5; var secondRowY ; 
    $(function() { 
 
        canvass.width = window.innerWidth; 
        repetitions = canvass.width / 10; 
        canvass.height = 30; 
        ctx = canvass.getContext('2d'); 
        firstRowY = canvass.height / 2 - 3; 
        secondRowY = canvass.height / 2 + 1; 
 
        redraw(); 
 
        //resize the canvass to fill browser window dynamically 
        window.addEventListener('resize', resizecanvass, false); 
 
        //for some reason i cannot draw on the canvas after it was resized 
        function resizecanvass() { 
            canvass.width = window.innerWidth; 
            repetitions = canvass.width / 10; 
            canvass.height = 30; 
            ctx = canvass.getContext('2d'); 
            firstRowY = canvass.height / 2 - 3; 
            secondRowY = canvass.height / 2 + 1; 
 
            /** 
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvass goes will be cleared. 
             */ 
 
            redraw(); 
        } 
 
 
        function redraw() { 
            canvass = document.getElementById("zipper-canvas"); 
            ctx = canvass.getContext('2d'); 
            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; 
            } 
        } 
    }); 

请您参考如下方法:

问题是您没有重置 firstRowX 和 secondRowX 变量，因此您最终会在 Canvas 之外进行绘制。我修复了这个问题，并将变量定义移到了它们所属的位置。

var canvass = document.getElementById('zipper-canvas'); 
// Could be const 
var firstRowX = 0; 
var secondRowX = 5; 
// Set the correct size on load 
resizecanvass(); 
 
//resize the canvass to fill browser window dynamically 
window.addEventListener('resize', resizecanvass, false); 
 
//for some reason i cannot draw on the canvas after it was resized 
function resizecanvass() { 
    canvass.width = window.innerWidth; 
    canvass.height = 30; 
    /** 
     * Your drawings need to be inside this function otherwise they will be reset when 
     * you resize the browser window and the canvass goes will be cleared. 
     */ 
    redraw(); 
} 
 
 
function redraw() { 
    var ctx = canvass.getContext('2d'); 
    ctx.clearRect(0, 0, canvass.width, canvass.height); 
     
    var repetitions = canvass.width / 10; 
    var firstRowY = canvass.height / 2 - 3; 
    var secondRowY = canvass.height / 2 + 1; 
     
    for (var r = 0; r < repetitions; r++) { 
        ctx.beginPath(); 
        ctx.rect(firstRowX + r*10, firstRowY, 5, 5); 
        ctx.fillStyle = "#edeeef"; 
        ctx.fill(); 
        ctx.closePath(); 
    } 
    for (var r2 = 0; r2 < repetitions; r2++) { 
        ctx.beginPath(); 
        ctx.rect(secondRowX + r2*10, secondRowY, 5, 5); 
        ctx.fillStyle = "#a2a3a5"; 
        ctx.fill(); 
        ctx.closePath(); 
    } 
}

canvas { 
  outline:1px solid black; 
} 
body, html, canvas { 
    margin: 0px;padding:0px; 
    }

<canvas id='zipper-canvas'></canvas>

这是一个 JSFiddle，您可以在其中测试调整大小行为:

https://jsfiddle.net/Darker/noxd4x64/1/

请注意，使用 CSS 背景可以实现相同的效果，无需任何编程。