Html5 off-screen canvas Application

Html5 off-screen canvas Application

In most cases, the canvas is applied to html5 games, but the most recently used project is to draw a large number of images.

For example, a dynamic time can be drawn on a fixed background image. With this requirement, most of those who have worked on html5 development will surely know how to do the specific steps. Below I will give a brief introduction:

1. Draw the background first.

2. format the time and draw it on the background.

3. Clear the canvas and repeat steps 1 and 2.

The js file is as follows:

 

$(document).ready(function() {    var canvas = document.getElementById(canvas);    canvas.width = 400;    canvas.height = 400;    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 method should be the best way to meet this requirement.

 

In fact, in most cases, this method is also a good choice, but at this time there is a more complex requirement, requiring the background to be more complex graphics, it is composed of many objects, such as the following dashboard:

This is an HTML 5-based dashboard that needs to be changed to obtaining the current value from the background every second and then directing it to the current value. It may not be appropriate to use the above method at this time. The implementation of the dashboard is not very troublesome. When the background data reaches 3000 objects or more (lines in html5), it is not appropriate to use the above method to draw. At this time, canvas will be used.

The modified js file is as follows:

 

$(document).ready(function() {    var canvas = document.getElementById(canvas);    canvas.width = 400;    canvas.height = 400;    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 steps for the above file are as follows:

 

Draw static data on the off-screen canvas, draw off-screen canvas on the current canvas, and then draw dynamic data on the current canvas, this reduces the number of times static data is drawn.