HTML5 canvas implements simple double buffering

There are a lot of interesting things on the HTML5 canvas, such as requesting animation frameworks and making animations with JavaScript. Today’s article shares with you about the implementation of simple double buffering in html5 canvas. Friends in need can take a look. methods in the article.

For more advanced content you may want to use canvas, which is typically GPU accelerated and allows for fairly high and stable frame rates using window.request.tionFrame. (Recommended Course: HTML5 Video Tutorial)

If you need to double buffer on the canvas, a popular approach is to create a second canvas element and draw to that canvas element, Then use drawImage to draw the finished image to the main canvas, the result is as follows:

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);
    })();

Enter CTX.SAVER() and CTX.Rebug()

Today, I found out that there is a cleaner way, Works just as well as the above method:

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

Despite the odd name, it just freezes the rendering of the context, then resumes rendering after it's finished drawing.

This article ends here. For more exciting content, you can pay attention to the related Video Tutorial column on the php Chinese website! ! !

The above is the detailed content of HTML5 canvas implements simple double buffering. For more information, please follow other related articles on the PHP Chinese website!