preface

I encountered a flash screen problem when USING Canvas to make H5 today. The flicker effect is shown below:

It is

Function introduction

The function of this part of H5 is to switch the mask of the picture or change the background by clicking the secondary menu.

Because the function is simple, the native canvas is used to achieve this function. However, a flicker occurs when the canvas is cleared using clearRect.

Code implementation (problem code)

The following code is the key code for the flash screen, omitting the image definition and onload:

// Trigger this function to update the canvas after clicking the secondary menu
updateCanvas(){
    const canvas = document.getElementById('canvas'); // Get the canvas
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0.0.1448.750); // Empty the canvas
    // Start redrawing
    ctx.drawImage(bg,0.0); / / the background.// Omit other drawing processes
}
Copy the code

Problem analysis

After simple analysis, it is concluded that the reason for the flicker screen is that it takes a long time to draw after clearRect clears the canvas, resulting in the flicker screen phenomenon.

What is double cache

Take a look at this article about double caching on Microsoft’s web site:

Flicker is a common problem when programming graphics. Graphical operations that require multiple complex drawing operations can cause rendered images to flicker or have an unacceptable appearance. To address these issues, the.NET Framework provides double buffering.

Double buffering uses content buffering to solve flicker problems associated with multiple draw operations. When double buffering is enabled, all drawing operations are rendered first to the memory buffer instead of the drawing surface on the screen. After all drawing operations are complete, the memory buffer is copied directly to the drawing surface associated with it. Because only one graphical operation is performed on the screen, the image flicker associated with complex drawing operations can be eliminated.

Use dual caching to solve the problem

As mentioned above, simply speaking, the main problem is that it takes a long time to draw, which leads to the flash screen. The solution is to create a new canvas as the cache canvas and complete the drawing process through the cache canvas. After the drawing is completed, the cache canvas is directly copied to the original canvas. In this way, the problem of flickering screen caused by drawing too long can be solved.

Code implementation

The following code is the key code, omitting the image definition and onload:

updateCanvas(){
    const canvas = document.getElementById('canvas'); // Get the canvas on the page
    const ctx = canvas.getContext('2d');
    
    const tempCanvas = document.createElement('canvas'); // Create a new canvas as the cache canvas
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 1448; tempCanvas.height = 750; // Set width and height

    // Start drawing
    tempCtx.drawImage(bg,0.0); / / the background.// Omit other drawing processes
    
    // The cache canvas has been drawn
    
    ctx.clearRect(0.0.1448.750); // Empty the old canvas
    ctx.drawImage(tempCanvas,0.0); // Copy the cache canvas to the old canvas
}
Copy the code

Effect of acceptance

You can clearly see that the flash screen problem has been solved!

conclusion

  • When repainting cloth, we need to use itclearRectAt this time, the canvas is empty. After repainting, if there is more content, the time will increase accordingly, so there is a gap in vision, we see the situation of flash screen;
  • To solve the flash screen, in fact, is how to solve the problem of drawing a long time;
  • This refers to the concept of double cache in graphics and image processing programming, and the drawing process is handed over to the cache canvas, so that the drawing process is omitted in the page canvas, and the cache canvas is not added to the page, so we can’t see the drawing process, and the problem of flash screen is solved.

Refer to the link

  • Talk about canvas H5 animation 】 【 animation flicker problem: www.cnblogs.com/kenkofox/p/…
  • Double buffered graphics: docs.microsoft.com/zh-cn/dotne…

More articles

  • Check out other articles of netease Creative Department: github.com/f2e-netease…
  • Check out more of my articles: github.com/ningbonb/bl…