Application of HTML5 off-screen canvas

Off-screen canvas is most often used in HTML5 games, but a recent exposure to a project is applied to drawing large numbers of graphics.

For example, there are the following requirements to draw a dynamic time on a fixed background map. To get this demand, most of the pits HTML5 developed to know the specific steps to do, let me briefly say:

1. Draw the background first.

2. Draw the time formatting to the background.

3, clear the canvas, repeat the first and second steps.

JS file as follows:

$ (document). Ready (function () {    var canvas = document.getElementById ("canvas");    Canvas.width = n;    Canvas.height = n;    var ctx = Canvas.getcontext ("2d");    SetInterval (function () {        ctx.clearrect (0,0,200,200);        Ctx.rect (0,0,400,400);        Ctx.fillstyle= ' Blue ';        Ctx.fill ();        var time = new Date (). GetTime ();        Ctx.font= ' 20pt Calibri ';        ctx.strokestyle= ' Red ';        Ctx.stroketext (time,100,150);    },1000);});

This approach should be the best way to meet this need.

In fact, in most cases this is a good choice, but this time there is a more complex requirement, the background is more complex graphics, and is a combination of many objects, such as the following dashboard:

This is a use of HTML5 to draw the dashboard, the need to change to get the current value from the background, and then indicate to the current value, this time to use the above method may not be appropriate. And the implementation of the dashboard is not very cumbersome, when the background data reaches 3,000 objects or more (lines in the HTML5), it is not appropriate to use the above method to draw. This time the off-screen canvas comes in handy.

For the top requirements of the modified JS file as follows:

$ (document). Ready (function () {    var canvas = document.getElementById ("canvas");    Canvas.width = n;    Canvas.height = n;    var ctx = Canvas.getcontext ("2d");    var  offcanvas = document.createelement ("canvas");    offcanvas.width=400;    offcanvas.height=400;    var offcontext = Offcanvas.getcontext ("2d");    Offcontext.rect (0,0,400,400);    Offcontext.fillstyle= ' Blue ';    Offcontext.fill ();    SetInterval (function () {        ctx.clearrect (0,0,400,400);        Ctx.drawimage (offcanvas,0,0);        var time = new Date (). GetTime ();        Ctx.font= ' 20pt Calibri ';        ctx.strokestyle= ' Red ';        Ctx.stroketext (time,100,150);    },1000);});

The above file steps are as follows:

Draws the static data on the off-screen canvas, draws the off-screen canvas on top of the current canvas, and then draws the dynamic data on top of the current canvas, which reduces the number of static data drawn.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Application of HTML5 off-screen canvas