窗口调整大小后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

问题是您没有重置@Resource(lookup="jdbc/refDB") DataSource oracleDS; @Resource(lookup="jdbc/CacheDb") DataSource h2DS; 和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;
    }

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

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

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