HTML 캔버스 이중 버퍼링 프레임 속도 문제

Question

전체 화면 캔버스에 3 개의 이미지가 그려져 있습니다. 창 크기를 조정하면 이러한 이미지의 위치가 바뀝니다. 그러나, 그것은 Firefox에서 매우 glitchy 인 것처럼 보입니다.

이중 버퍼링이이 문제를 해결해야한다는 것을 읽었지 만 다음 위치를 알 수 없을 때 버퍼를 두 번 어떻게 사용할 것인지 궁금합니다. 즉, 미래에 무엇이 버퍼링되어야 하는지를 결정할 수 없으므로, 이것이 어떻게 가능할까요?

여기는 할 수있는 한 가지 근원이지만, 나는 페도르가 설명하려고하는 개념을 완전히 이해하지 못합니다.

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

나는 어쩌면 당신은 이중 어떤 버퍼링 오해하는 생각이있다. 디스플레이에서 그래픽의 부드러운 실시간 렌더링을위한 기술.

개념 상 두 개의 버퍼가 있습니다. 한 번에 하나만 볼 수 있습니다. 프레임을 구성하는 요소를 그리려면 보이지 않는 버퍼에 그립니다. 너 구름에. 그런 다음 버퍼를 뒤집어 숨겨진 것을 보이게하고 보이는 것을 숨긴다. 그런 다음 다음 프레임에서 새로 숨겨진 버퍼로 그립니다. 그리기가 끝나면 뒤집습니다.

프레임이 완료되기 전에 요소의 부분 렌더링을 보는 것을 중지합니다. 게임 시스템에서 이것은 디스플레이의 수직 리프레쉬와 동기화되어 실제와 같이 매끄럽고 찢어짐과 같은 인공물을 막을 수 있습니다.

위의 코드를 보면 두 캔버스 요소를 만들었지 만 첫 번째 Context 객체 만 사용하고있는 것 같습니다. 나는 뒤집기가 일어나지 않기 때문에 이것은 불완전하다고 가정합니다.

또한 창의 크기 조정 이벤트가 끌릴 때 지속적으로 발생하여 열정적 인 렌더링이 발생할 수 있다는 사실에 유의할 가치가 있습니다. 일반적으로 resize 이벤트에 타이머를 만들어 실제로 다시 렌더링합니다. 이렇게하면 사용자가 몇 밀리 초 동안 크기 조정을 중지하면 재 렌더링 만 수행됩니다.

또한 드로잉 루틴은 매번 새로운 이미지 개체를 만들 필요가 없습니다. 하나의 이미지 객체를 사용하여 캔버스에 여러 번 렌더링 할 수 있습니다. 이렇게하면 렌더링 속도가 상당히 빨라집니다.

희망이 도움이됩니다.