Canvas --- Canvas image loading, using the javascript callback mechanism to implement an image loader, javascriptcanvas

Canvas --- Canvas image loading, using the javascript callback mechanism to implement an image loader, javascriptcanvas

The drawImage method of canvas has a disadvantage, that is, when the image has not been fully loaded, calling it will be ineffective.

Of course, you can ignore this problem directly in the high-speed main loop of the game, or use img. complete = true for determination.

You can use the img. onload = function () {}; callback solution outside the game loop.

However, if you need to load a large number of images in advance and inform the user of the loading progress, you need an image loader.

I. Principles of image Loaders

1. For each image, enable a corresponding thread for loading. After loading, modify the value of a variable-loadedNum.

2. Enable another thread to monitor the values of loadedNum and needLoadNum. When loading is complete, call the callback function.

3. Because javascript does not have a traditional thread mechanism, use setInterval to simulate these operations.

Ii. Use of the image Loader

Var canvas = document. getElementById ("canvas"); var context = canvas. getContext ("2d"); // canvas adaptive MikuScaleUtil. rejustCanvas (canvas); // image loader MikuImageManager. addImg ("girl01", "http://www.dm123.cn/ecms/d/file/2015-02-01/ae20761d9c6ff6e87989634a586a1906.jpg"); MikuImageManager. addImg ("girl02", "http://www.dm123.cn/ecms/d/file/2015-02-04/c6913e96129402d88f344e1c7b8e3c8e.jpg"); MikuImageManager. addImg ("girl03", "http://www.dm123.cn/ecms/d/file/2015-02-03/071624b53ca02eca0d5696b7759f9b2e.jpg"); MikuImageManager. addImg ("girl04", "http://www.dm123.cn/ecms/d/file/2015-02-03/4ef08ed1842579ff38244479b1b721ba.jpg"); MikuImageManager. initImgs (loadImage, main); // main function main () {context. drawImage (MikuImageManager. getImg ("girl01"), 0, 0);} function loadImage (loaded, total) {console. log (loaded + "|" + total );}

1. Use the addImg method to add images to the loader.

2. Call initImgs (loadImage, main); Method to start the loader

The loadImage callback function is called every 50 milliseconds to output the number and total number of currently loaded images. You can use it to update the progress bar.

The main callback is called after the load is complete.

3. getImg (name). You can obtain the image object by using the previous get name.

Iii .:

4. Source Code

// Tool type 01-image management tool function MikuImageManager () {}; // Private Attribute MikuImageManager. _ imgArray = new Array (); MikuImageManager. _ loadedNum = 0; // public method MikuImageManager. addImg = function (name, src) {var img = new Image (); img. src = src; img. name = name; img. loaded = false; MikuImageManager. _ imgArray. push (img) ;}; MikuImageManager. getImg = function (name) {var target; MikuImageManager. _ imgArray. forEach (function (img) {if (img. name = name) {target = img ;}}); return target ;}; MikuImageManager. initImgs = function (onLoadCallBack, loadOvercallBack) {MikuImageManager. _ imgArray. forEach (function (img) {MikuImageManager. _ loadImg (img) ;}); var timer = setInterval (function () {// console. log (MikuImageManager. _ loadedNum + "|" + MikuImageManager. _ imgArray. length); onLoadCallBack (MikuImageManager. _ loadedNum, MikuImageManager. _ imgArray. length); if (MikuImageManager. _ loadedNum === MikuImageManager. _ imgArray. length) {// console. log ("All images loaded"); clearInterval (timer); // callback loadOvercallBack () ;}, 50) ;}; // Private method MikuImageManager. _ loadImg = function (img) {var checkTime = 0; // set the timer var timer = setInterval (function () {checkTime = checkTime + 50; // console. log ("loading time:" + img. name + "|" + checkTime); // if the image is loaded, if (img. complete = true) {MikuImageManager. _ loadedNum ++; // console. log ("loaded:" + img. name); // clear the timer clearInterval (timer) ;}, 50 );};

Zookeeper