Question

我正在尝试让我的脚本逐渐渲染出更高分辨率的图像，并在它们可用时将它们替换到我的画布中。现在，在脚本达到计划渲染的最高分辨率之前，没有任何东西会被渲染到画布。

Here's where I'm currently at（jsfiddle）。基本结构是：

$(function() {

    window.onresize = function() {
        resizeCanvas();
    };

    resizeCanvas();

});

function resizeCanvas() {
    // set canvas css to fill body

    canvas.width = 18;
    canvas.height = canvas.width * aspectRatio;

    ctx = canvas.getContext("2d");        
    drawMandlebrot(...);

    while (2 * canvas.width < $(window).width()) {
        canvas.width *= 2;
        canvas.height *= 2;

        drawMandlebrot(...);
    }
}

function drawMandlebrot(...) {
    var preCanvas = document.createElement('canvas');
    preCanvas.width = canvas.width;
    preCanvas.height = canvas.height;
    var prectx = preCanvas.getContext('2d');

    // render stuff to prectx
    ctx.putImageData(prectx.getImageData(0,0,preCanvas.width,preCanvas.height), 0, 0);
}

为什么较小的分辨率版本不能渲染到画布？

与我的主要问题无关，我如何确保渲染可以通过window.onresize之类的东西来中断？我如何才能优化渲染程序以更快地执行？

逐渐渲染更高分辨率的图像，画布不会显示任何图像

0 个答案: