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

This article mainly explains the "HTML5 Canvas performance improvement skills", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "HTML5 Canvas performance improvement skills" bar!

Use caching technology to achieve pre-rendering and reduce repeated rendering of Canvs content

A lot of times when we draw and update on Canvas, we always keep some of the same content.

The cache should be drawn in advance instead of each refresh.

The direct drawing code is as follows:

The code is as follows:

Context.font= "24px Arial"

Context.fillStyle= "blue"

Context.fillText ("Please press to exit game", 5pm 50)

RequestAnimationFrame (render)

Use the cache pre-drawing technique:

The code is as follows:

Function render (context) {

Context.drawImage (mText_canvas, 0,0)

RequestAnimationFrame (render)

}

Function drawText (context) {

MText_canvas = document.createElement ("canvas")

MText_canvas.width = 450

MText_canvas.height = 54

Var m_context = mText_canvas.getContext ("2d")

Masked context.font = "24px Arial"

Masked context.fillStyle = "blue"

M_context.fillText ("Please press to exit game", 5pm 50)

}

When using Canvas cache rendering technology, be sure to remember that the size of the cached Canvas object is smaller than the actual Canvas size. Try to draw straight line points together, and try to draw them all at once. A bad code is as follows:

The code is as follows:

For (var I = 0; I < points.length-1; iTunes +) {

Var p1 = points [I]

Var p2 = points [iTun1]

Context.beginPath ()

Context.moveTo (p1.x, p1.y)

Context.lineTo (p2.x, p2.y)

Context.stroke ()

}

The code with higher performance after modification is as follows:

The code is as follows:

Context.beginPath ()

For (var I = 0; I < points.length-1; iTunes +) {

Var p1 = points [I]

Var p2 = points [iTun1]

Context.moveTo (p1.x, p1.y)

Context.lineTo (p2.x, p2.y)

}

Context.stroke ()

Avoid frequent switching of unnecessary Canvas drawing states. An example of frequent switching of drawing style is as follows:

The code is as follows:

Var GAP = 10

For (var item0; I

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.