HTML5 캔버스는 간단한 이중 버퍼링을 구현합니다.

HTML5 캔버스에는 애니메이션 프레임워크를 요청하고 JavaScript로 애니메이션을 만드는 등 흥미로운 것들이 많이 있습니다. 오늘의 기사에서는 HTML5 캔버스에서 간단한 이중 버퍼링을 구현하는 방법에 대해 공유하겠습니다. 도움이 필요한 친구들은 기사 방법을 살펴보세요. .

더 고급 콘텐츠의 경우 일반적으로 GPU 가속화되고 window.request.tionFrame을 사용하여 상당히 높고 안정적인 프레임 속도를 허용하는 캔버스를 사용할 수 있습니다. (추천 과정: HTML5 비디오 튜토리얼)

캔버스에 이중 버퍼가 필요한 경우 널리 사용되는 접근 방식은 두 번째 캔버스 요소를 만들고 해당 캔버스 요소에 그린 다음 drawImage를 사용하여 완성된 이미지를 그리는 것입니다.

var primaryCtx = document.getElementById("canvas").getContext("2d");
var secondaryCanvas = document.createElement("canvas"),
      secondaryCtx = secondaryCanvas.getContext("2d");
      (function drawFrame() {
    requestAnimationFrame(drawFrame);
    secondaryCtx.fillStyle = "#f00";
    secondaryCtx.fillRect(10,10,20,20);
    primaryCtx.drawImage(secondaryCanvas);
    })();

CTX.SAVER() 및 CTX.Rebug()를 입력하세요.

오늘 저는 위와 마찬가지로 더 깨끗하고 작동하는 방법을 발견했습니다.

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    primaryCtx.save(); //Freeze redraw
    primaryCtx.fillStyle = "#f00";
    primaryCtx.fillRect(10,10,20,20);
    primaryCtx.restore(); //And now do the redraw
    })();

이상한 이름에도 불구하고 , 그러나 컨텍스트 렌더링을 정지한 다음 그리기가 완료된 후 렌더링을 다시 시작합니다.

이 기사는 여기서 끝납니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 동영상 튜토리얼 칼럼을 주목하세요! ! !

위 내용은 HTML5 캔버스는 간단한 이중 버퍼링을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!