Question

我有一个全屏画布，上面画有3张图片。当我调整窗口大小时，这些图像会改变位置;然而，它似乎非常小问题，在Firefox中更是如此。

我一直在读双缓冲应该解决这个问题，但我想知道如果下一个位置未知，我将如何双缓冲。也就是说，我无法确定未来应该缓冲什么，那么这怎么可能呢？

这是一个看似可行的来源，但我并不完全理解Fedor试图解释的概念。

Does HTML5/Canvas Support Double Buffering?

到目前为止，我有，

    $canvas = $('#myclouds')[0];
    $canvas_buffer = $('canvas')[0].insertAfter($canvas).css('visibility', 'hidden');
    context = $canvas.getContext('2d');
    context_buffer = $canvas_buffer.getContext('2d');
    clouds_arr = [$canvas, $canvas_buffer];

$(window).resize(function () {
    drawCanvas();
};

function initCanvas() {

    // Sources for cloud images
    var cloud1 = '/js/application/home/images/cloud1.png',
        cloud2 = '/js/application/home/images/cloud2.png',
        cloud3 = '/js/application/home/images/cloud3.png';

    // add clouds to be drawn
    // parameters are as follows:
    // image source, x, y, ratio, adjustment)
    addCloud(cloud1, null, 125, .03);
    addCloud(cloud2, null, 75, .15);
    addCloud(cloud3, null, 50, .55);
    addCloud(cloud1, null, 125, .97, 300);
    addCloud(cloud2, null, 70, .85, 300);
    addCloud(cloud3, null, 45, .5, 300);

    // Draw the canvas
    drawCanvas();
}

function drawCanvas() {
    // Reset
    $canvas.attr('height', $window.height()).attr('width', $window.width());

    // draw the clouds
    var l = clouds.length;
    for (var i = 0; i < l; i++) {
        clouds[i].x = ($window.width() * clouds[i].ratio) - clouds[i].offset;
        drawimage(context, clouds[i]);
    }
}

function Cloud() {
    this.x = 0;
    this.y = 0;
}

function addCloud(path, x, y, ratio, offset) {
    var c = new Cloud;
    c.x = x;
    c.y = y;
    c.path = path;
    c.ratio = ratio || 0;
    c.offset = offset || 0;
    clouds.push(c);
}

function drawimage(ctx, image) {
    var clouds_obj = new Image();
    clouds_obj.src = image.path;

    clouds_obj.onload = function() {
        ctx.drawImage(clouds_obj, image.x, image.y);
    };
}

Answer 1

我想也许你误解了双缓冲是什么。它是一种在显示器上平滑实时渲染图形的技术。

这个概念是你有两个缓冲区。任何时候只能看到一个。当你去绘制构成一个框架的元素时，你将它们绘制到不可见的缓冲区。在你的情况下云。然后翻转缓冲区，使隐藏的缓冲区可见，隐藏可见的缓冲区。然后在下一帧上绘制到现在新隐藏的缓冲区。然后在绘图结束时你回头。

这样做可以阻止用户在帧完成之前看到元素的部分渲染。在游戏系统中，这也将与显示器的垂直刷新同步，以实现平滑并停止诸如撕裂之类的伪像。

查看上面的代码，您似乎已经创建了两个canvas元素，但您只使用了第一个Context对象。我认为这是不完整的，因为没有发生翻转。

还值得注意的是，窗口调整大小事件可以在拖动时连续触发，这会导致疯狂渲染。我通常在resize事件上创建一个计时器来实际重新渲染。这样，重新渲染只在用户停止调整大小几毫秒后才会发生。

此外，您的绘图例程每次都不需要创建新的Image对象。您可以使用一个图像对象并多次渲染到画布。这将大大加快渲染速度。

希望这有帮助。

HTML canvas双缓冲帧率问题

1 个答案: