调整窗口大小后 HTML5 Canvas 被阻止

Question

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

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

Answer 1

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

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 背景无需任何编程也可以实现相同的效果。