Проблемы с частотой кадров с буферизацией в HTML-формате

Question

У меня есть полноэкранный холст с тремя изображениями, нарисованными на нем. Когда я изменяю размер окна, эти изображения меняют положение; однако, похоже, он очень глючный, более того, в Firefox.

Я читал эту двойную буферизацию, чтобы решить эту проблему, но мне интересно, как я буду удваивать буфер, когда следующая позиция неизвестна. То есть я не могу определить, что должно буферизировать в будущем, так как это возможно?

Вот один источник, который кажется выполнимым, но я не совсем понимаю концепцию, которую Федор пытается объяснить.

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

Я думаю, может быть, вы недоразумение, что двойной буферизации. Его технология для плавного рендеринга графики в реальном времени на дисплее.

Концепция у вас есть два буфера. В любой момент можно увидеть только один. Когда вы идете рисовать элементы, составляющие кадр, вы рисуете их в невидимом буфере. В вашем случае облака. Затем вы переворачиваете буферы, делая скрытый видимым и видимым скрытым. Затем на следующем кадре вы рисуете только недавно скрытый буфер. Затем в конце рисунка вы откидываетесь назад.

Это означает, что пользователь не видит частичную визуализацию элементов до завершения кадра. В игровых системах это также будет синхронизироваться с вертикальным обновлением дисплея, чтобы быть действительно плавным и остановить артефакты, такие как разрывы.

Глядя на вас, код над вами, похоже, создал два элемента холста, но вы используете только первый объект Контекста. Я предполагаю, что это неполно, поскольку не происходит перелистывания.

Его также стоит отметить, что событие изменения размера окна может срабатывать непрерывно при перетаскивании, которое может вызвать безумный рендеринг. Обычно я создаю таймер в событии изменения размера для фактического повторного рендеринга. Таким образом, повторная обработка происходит только после того, как пользователь перестанет изменять размер в течение нескольких миллисекунд.

Кроме того, ваша программа рисования создает новые объекты изображения каждый раз, когда вам не нужно делать. Вы можете использовать один объект изображения и рендерить на холст несколько раз. Это значительно ускорит рендер.

Надеюсь, это поможет.