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

This article focuses on "how to optimize canvas performance", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to optimize canvas performance.

Optimize canvas to reduce repeated drawing of Canvas code 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:

Context.font= "24pxArial"

Context.fillStyle= "blue"

Context.fillText ("Pleasepresstoexitgame", 5pm 50)

RequestAnimationFrame (render)

Use the cache pre-drawing technique:

Functionrender (context) {

Context.drawImage (mText_canvas,0,0)

RequestAnimationFrame (render)

}

FunctiondrawText (context) {

MText_canvas=document.createElement ("canvas")

MText_canvas.width=450

MText_canvas.height=54

Varm_context=mText_canvas.getContext ("2d")

Masked context.font = "24pxArial"

Masked context.fillStyle = "blue"

M_context.fillText ("Pleasepresstoexitgame", 5pm 50)

}

The optimized canvas cache Canvas object size 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:

For (vari=0;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.