HTML5 Canvas optimized Retina screen in iPhone 4

IPhone4 mediumHTML5 CanvasOptimizationRetinaThe screen is the content to be introduced in this article.IPhone4,RetinaScreen is widely used in mobile devices. AlthoughRetinaThe screen brings unprecedented clear and smooth effects to the display of the screen, but it brings some little trouble to developers. HowRetinaThere are many articles on designing the software UI on the screen. I don't want to repeat the content here, but wantHTML5 canvasInRetinaThe application on the screen tells me some of my experiences.

I have been using HTML5 technology to develop a game engine in my spare time. Everything went well, but when I tested it on iPhone 4, it is found that its performance is much lower than on iPod touch 3. The main cause of this phenomenon is the retina screen.

Next, let's talk about how the retina screen device handles canvas

When the iPhone 4 Safari browser displays images on the canvas, the original pixel is doubled to get the same visual size as the traditional screen. (The pixel size of the retina screen is smaller. It can be understood that four retina pixels represent one traditional pixel ). During such amplification, the system does not simply convert 1*1 pixel to 2*2 pixel, but implements a "complex amplification algorithm ", the objective is to get a smoother, more natural (like anti-sawtooth) image. Although this type of amplification operation is native, it still causes extremely low performance during canvas rendering (possibly for other reasons ).

We cannot manually control such amplification operations (prohibit amplification or simplify the amplification algorithm ). However, we still have some tips to optimize the canvas to improve its performance on the retina screen. Suppose we want to perform the following operations on the iPhone 3GS:

Load a 50*50 Image

Create a canvas of 300*300

Draw the image at the (100,100) coordinate of the canvas.

(Unit: pixels)

Next let's take a look at how to optimize this operation in iPhone 4:

Load a 50*50 Image

This image is magnified by one time to 100*100. The code is used to enlarge the image. You can use the simple 1 to 4 algorithm"

Create a canvas of 600*600 (that is, multiply the original width and height by 2)

Set style. width = 300 and style. height = 300 for the canvas (that is, the size of the style is still the original size)

Draw the enlarged image at the (200,200) coordinate of the canvas (that is, multiply the original horizontal and vertical coordinates by 2)

The effects achieved through this solution are almost identical to those achieved before optimization and on the iPhone 3GS (invisible to the naked eye), but the performance is improved by nearly 50% compared with the previous optimization! In the optimization solution, step 1 is the most critical, and the core of the other steps is "drawing a picture of the double size on the canvas ". It is reasonable to say that the performance should be lower, but because the size of the canvas style is only half of the actual size of the canvas, everything will become different.

Run the following code:

 
 

  
  
canvas.width=600;  
  
  
canvas.height=600;  
  
  
canvas.style.width="300px";  
  
  
canvas.style.height="300px"; 
 
 

The actual size of the canvas is changed to 300*300, and the coordinate system of the canvas is scaled. The zoom ratio is 300/600. That is to say, the size and coordinates of all vertices on the canvas are reduced by half. Therefore, "Draw a 2x larger image on a 2x larger canvas ", after the scale-out is halved (this algorithm is also a complex scale-out algorithm), the scale-down is first zoomed in and then reduced, so nothing is actually changed.

Some may be confused here: first zoom in and then zoom out, and then draw on the retina screen of iPhone 4, why is it better than direct rendering? It is reasonable that One step more operations should be slower. After learning about each of the above steps, we can understand it as follows:

Before optimization: 50*50 pixels are converted to 100*100 pixels through a "complex amplification algorithm"

After optimization: 50*50 pixels are changed to 100*100 pixels through the "simple amplification algorithm ...... 100*100 pixels are changed to 50*50 pixels through the "Complex Reduction Algorithm ...... 50*50 pixels are converted to 100*100 pixels through a "complex amplification algorithm"

The "complex zoom-in algorithm" and "complex zoom-in algorithm" may be opposite to each other in the iPhone 4, and thus offset each other. Therefore, after optimization, 50*50 pixels are converted to 100*100 pixels through the "simple amplification algorithm. Let's take a look.

The following is a more complex example: http://data.wiyun.com/finscn/retina/test-retina.html.IPhone4 or iPod touch 4 friends can visit and try to see the FPS changes before and after optimization. Currently, according to feedback from netizens, the top optimization is about 32 FPS, and the top optimization is about 45 FPS.

Summary:IPhone4 mediumHTML5 CanvasOptimizationRetinaI hope this article will help you.