Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to solve the splash screen caused by Canvas clearRect". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the splash screen caused by Canvas clearRect.

Brief introduction to the problem

Brief introduction of function

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

Because the function is simple, native canvas is used to implement this function. However, flickering occurs when using clearRect to clear the canvas.

Code implementation (problem code)

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

/ / after clicking the secondary menu, trigger the function to update the canvas updateCanvas () {const canvas = document.getElementById ('canvas'); / / get the canvas const ctx = canvas.getContext (' 2d'); ctx.clearRect (0pier0line 1448750); / / empty the canvas / / start redrawing ctx.drawImage (bg,0,0); / / background. / / omit other drawing processes}

Analysis of problems

After a simple analysis, it is concluded that the reason for the splash screen is that after clearRect clears the canvas, the drawing time is longer, which leads to the phenomenon of the splash screen.

What is double cache?

Take a look at the explanation of double caching in the article on double buffering graphics on the microsoft website:

Flickering when programming graphics is a common problem. Graphics operations that require multiple complex drawing operations can cause rendered images to flicker or have an unacceptable appearance. To solve these problems,. NET Framework provides double buffering.

Double buffering uses content buffering to solve flicker problems associated with multiple drawing operations. When double buffering is enabled, all drawing operations are first rendered to the memory buffer rather than to the drawing surface on the screen. After all drawing operations are completed, the memory buffer is copied directly to the drawing surface associated with it. Since only one graphic operation is performed on the screen, the image flicker associated with the complex drawing operation can be eliminated.

Use double cache to solve the problem

To put it simply, the main problem is that the long drawing time leads to the splash 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, which can solve the splash screen problem caused by too long drawing time.

Code implementation

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

UpdateCanvas () {const canvas = document.getElementById ('canvas'); / / get canvas const ctx = canvas.getContext (' 2d') in the page; const tempCanvas = document.createElement ('canvas'); / / create a new canvas as cache canvas const tempCtx = tempCanvas.getContext (' 2d'); tempCanvas.width = 1448; tempCanvas.height = 750; / / set width and height / / start drawing tempCtx.drawImage (bg,0,0) / / background. / / omit other rendering processes / / complete ctx.clearRect by caching canvas drawing (0Jing 0Jing 1448750); / / clear the old canvas ctx.drawImage (tempCanvas,0,0); / / copy the cache canvas to the old canvas} here. I believe you have a deeper understanding of "how to solve the splash screen caused in Canvas clearRect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.