Create a canvas animation framework (iii) -- Implement canvas image pre-loading and progress bar

As shown in the following example, first review the Directory

1. Extraction of common classes: animation objects and Frame Objects

2. The combination of spirit and meat: An easy-to-disassemble Motion Equation

3. Implementation of the progress bar: canvas image pre-loading

4. demo test: Use a demo test framework

Today I will discuss with you the canvas animation frameworkImage pre-loading, Such as the progress bar. This is not a false progress bar. It is a progress bar that can actually get the image loading progress in real time.

Why do you want to make this progress bar? Does canvas require a progress bar?The answer is obviously yes. If we put our pages on the server, the image download process will be quite long. If we start to execute the animation without pre-loading, the user will certainly not see the desired effect.

So let's take a look at the implementation of canvas image pre-loading (here refer to the online code, source: http://hi.baidu.com/jqz880321/item/fba0a210593b748489a9566c ):

/* Star * loading module * pre-loads images and displays the progress bar * parameter: Image array object, loaded callback function */function loadImages (sources, callback) {var loadedImages = 0; var numImages = 0; ctx. font = '14px bold '; ctx. lineWidth = 5; var clearWidth = canvas. width; var clearHeight = canvas. height; // get num of sources for (var src in sources) {numImages ++;} for (var src in sources) {images [src] = new Image (); // when an image is loaded, execute images [src]. onload = function () {// redraw a progress bar ctx. clearRect (0, 0, clearWidth, clearHeight); ctx. fillText ('loading: '+ loadedImages +'/'+ numImages, 200,280); ctx. save (); ctx. strokeStyle = '#555'; ctx. beginPath (); ctx. moveTo (200,300); ctx. lineTo (600,300); ctx. stroke (); ctx. beginPath (); ctx. restore (); ctx. moveTo (200,300); ctx. lineTo (loadedImages/numImages * 400 + 200,300); ctx. stroke (); // when all images are loaded, run the callback function callback if (++ loadedImages >=numimages) {callback ();}}; // import the image information in sources to the images array images [src]. src = sources [src] ;}// defines the pre-loaded Image array object and executes the loading Module window. onload = function () {var sources = {PaperBoy1: "images/run/PaperBoy1.png", PaperBoy2: "images/run/PaperBoy2.png", PaperBoy3: "images/run/PaperBoy3.png ", paperBoy4: "images/run/PaperBoy4.png", PaperBoy5: "images/run/Examples", PaperBoy6: "images/run/PaperBoy6.png", PaperBoy7: "images/run/Examples ", paperBoy8: "images/run/Examples", PaperBoy9: "images/run/Examples", PaperBoy10: "images/run/PaperBoy10.png", PaperBoy11: "images/run/PaperBoy11.png ", paperBoy12: "images/run/PaperBoy12.png", PaperBoy13: "images/run/Examples", PaperBoy14: "images/run/PaperBoy14.png", PaperBoy15: "images/run/Examples ", paperBoy16: "images/run/PaperBoy16.png", PaperBoy17: "images/run/tests", PaperBoy18: "images/run/tests", PaperBoy19: "images/run/tests ", paperBoy20: "images/run/paperboyw.png", PaperBoy21: "images/run/tests", PaperBoy22: "images/run/tests", PaperBoy23: "images/run/tests ", paperBoy24: "images/run/PaperBoy24.png", _ Street: 'images/_Street.png ', AD: 'images/AD.png', building: 'images/building.png ', cloud: 'images/cloud.png '}; // pre-load the image. After loading, execute main loadImages (sources, main);};/* end */

When windows. onload occurs, we define a sources object that stores all image information and pass it into the loadImages method.

The focus is to look at the loadImages method. It has two parameters: one is the sources of the stored image information, and the other is the callback function callback (once the image is loaded, the callback is executed. The main function is executed here, which means that the animation starts initialization)

The total number of images is included in numImages:

// First traverse the array and calculate the total number of images for (var src in sources) {numImages ++ ;}

In fact, the core of this method isAdd an onload event to each image.

After each image is loaded, we do three things:

1. Calculate the percentage of uploaded images and total images;

2. Draw a visible progress bar to show the loading progress;

3. Check whether the image is loaded. If the image is loaded, run callback. Otherwise, an error is returned.

The structure is as follows:

// Executed when an image is loaded
Images [src]. onload = function (){
// Calculate the number of loaded images, and calculate the percentage based on the total number of images
// Draw a progress bar
// If the image is loaded, call back
}