Using cache technology drawing, reduce duplication of drawing Canvs content
code is as follows:


the context. The font="24 px Arial";
the context. The fillStyle="blue";
context. FillText (" both Please press <Esc> to exit game ", 5, 50);
requestAnimationFrame (render);

use the cache early rendering technology:

  code is as follows:  


function render (context) {
the context. The drawImage (mText_canvas, 0, 0);
requestAnimationFrame (render);

} function drawText (context) {
mText_canvas=document. The createElement method (" canvas ");
mText_canvas. Width=450;
mText_canvas. Height=54; .
var m_context=mText_canvas getContext (" 2 d ");
m_context. The font="24 px Arial"; .
m_context fillStyle="blue";
m_context. FillText (" both Please press <Esc> to exit game ", 5, 50);
}

use Canvas cache rendering technology, must remember the cache size is smaller than the actual Canvas size Canvas object. Try to draw lines operating points together, and as far as possible once completed, a bad code is as follows:

  code is as follows:  


the for (var I=0; I <points. The length - 1; i++) {
var p1=points [I];
var p2=points [I + 1);
the context. The beginPath ();
the context. The moveTo (. P1 p1. X, y);
the context. The lineTo (p2) x, p2. Y);
the context. The stroke ();
}

modify later high performance code is as follows:
code is as follows:


the context. The beginPath ();
the for (var I=0; I <points. The length - 1; i++) {
var p1=points [I];
var p2=points [I + 1);
the context. The moveTo (. P1 p1. X, y);
the context. The lineTo (p2) x, p2. Y);

} context. The stroke ();

avoid unnecessary Canvas drawing state switch frequently, an example of frequent switching drawing style is as follows:

  code is as follows:  


var GAP=10;
the for (var I=0; i<10; i++) {
the context. The fillStyle=(I % 2? "blue" : "red");
context. FillRect (0, I * GAP, 400, the GAP);
}

drawing to avoid frequent switching state, better mapping code is as follows:

  code is as follows:  


//even
the context. The fillStyle="red";
the for (var I=0; I <5; i++) {
the context. The fillRect (0, (I * 2) * GAP, 400, the GAP);

}//odd
the context. The fillStyle="blue";
the for (var I=0; I <5; i++) {
the context. The fillRect (0, (I * 2 + 1) * GAP, 400, the GAP);
}

drawing, the drawing need to be updated only area, at any time to avoid unnecessary repetition of drawing and additional costs. For complex scene rendering using layered rendering technology, drawing is divided into foreground and background respectively.
HTML defined Canvas layer are as follows:

  code is as follows:  


<Canvas id="bg" width="640" height="480" style="position: absolute; z - index: 0" >
</canvas>
<Fg canvas id="" width=" 640 "height=" 480 "style=" position: absolute; z - index: 1 ">
<SPAN style="FONT - SIZE: 18 px" ></canvas>
</span>

if it is not necessary, as far as possible avoid the use of rendering effects, such as shadow, blur, etc.

avoid to use floating point coordinates


This concludes the body part