[Original] test the smoothness of canvas animation playback in different browsers. Original canvas Animation

[Original] test the smoothness of canvas animation playback in different browsers. Original canvas Animation

Canvas is undoubtedly one of the most exciting technologies on the HTML5 open network platform. Currently, in addition to IE8, new versions of various browsers support HTML5 Canvas.

The programmer needs to call the Canvas API through Javascript. The basic Canvas API consists of a 2D environment that allows programmers to draw various graphics and render text and display images in the definition area of the browser window. To achieve Canvas animation, the programmer needs to set the screen content before the next frame rendering and redraw the image to achieve the animation effect. Canvas animation is a bit like "flip-page Animation". Different images are drawn on each page of the picture book, and each frame is continuously scaled up and looks like an animated cartoon. Therefore, for Canvas, if "the browser page flip is not fast enough" or "the Canvas is not smooth enough to be played by the browser", the frame jump will occur, making the user feel stuck.

The following example shows the smoothness of canvas animation playing in different browsers and shares test data on different devices and browsers.

The code framework comes from the book deep HTML5 application development by Anthony T. Holdener and Mario Andres Pagella. The details are revised. The basic idea is to create an animation with only two frames, so that the browser can draw as much as possible within 10 seconds, and finally calculate the average number of animation frames executed per second. The higher the average number of frames, the smoother the Canvas animation is played by the browser.

1 <! Docutype html> 2 
Test the above Code every 10 times on different devices and browsers. The result is as follows (FPS is the 10-second average ):

All of the above test results are completed only when the preceding code is executed without other webpage requests from the browser.
On Win7, IE11 supports Canvas animation with the highest degree of smoothness, followed by Chrome, UC browser, and FireFox.
In Android 4.4.4, Chrome supports Canvas animation with the highest degree of smoothness, followed by Android browser, FireFox, Opera, and UC browser.
On the Ipad 6.1.2 system, safari provides a smoother Canvas animation than other browsers on Android 4.4.4.

 

References:
[1] Steve Fulton & Jeff Fulton. HTML5 Canvas development details. [M]. O' Reilly Media, Inc.2013;
[2] Anthony T. Holdener & Mario Andres Pagella. go deep into HTML5 application development. [M]. O 'Reilly Media, Inc.2011;
[Welcome to exchange :)]