javascript - HTML Canvas 双缓冲帧速率问题

Question

我有一个全屏 Canvas ，上面绘制了 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 对象。我认为这是不完整的，因为没有发生翻转。

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

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

希望这有帮助。