HTML5 Canvas Common API Summary (i)

1. Listen for browser load events.

Window.addeventlistener ("Load", eventwindowloaded,false);

The Load event occurs at the end of the HTML page load.

The third parameter sets whether the function captures events of this type before the event is passed to the underlying object in the DOM object tree.

2. Introduction of the Canvas method

<canvas id= "Fcanvas" width= "height=" >

Your Browser does not support HTML5 canvas

</canvas>

Determine if the browser supports canvas

(1) https://modernizr.com/

(2) Use function to judge

function canvas () {  var canuse=!!　　Document.createelement (' canvas '). GetContext;　　  if (!canuse) {return;  }}

　　

3. Wrapping the Console.log function to prevent error prompts when this function is not supported

var debugger=function () {};D ebugger.log=function (message) {     try{      console.log (message);      } catch (Exception) {      return;          }}

4. Animation Loop method

(1) SetTimeout

function Gameloop () {   window.settimeout (gameloop,20);   Drawscreen ()}gameloop ();

This way will clear itself every time, will not go on forever, better performance than setinterval. But it will appear if a frame requires a lot of calculation, but the time is not so long, so when the next frame of animation, this frame is not completed, this will cause the drop frame, if the time is too long = "not smooth, visual lag problem."

(2) Requestanimationframe ()

This method is the browser automatically determine the next frame of the rendering time, will not skip frames, drop frames, but not all browsers are supported.

Depending on the performance of the browser or the speed of the network, it will ensure that the frame is drawn, the next frame will be drawn, to ensure the performance, but also to ensure the smooth animation.

5. Using the canvas process

(0) Creating a DOM node for a canvas label on an HTML file

(1) Determine if window is loaded.

(2) Determine if the canvas supports it.

(3) Create a context object

var icanvas =document.getelementbyid ("Canvas"), Var icontext=icanvas.getcontext ("2d");

(4) Start drawing.

These are the preparations to start using canvas, and the next article will cover the common API for canvas.

HTML5 Canvas Common API Summary (i)