animation easelJS.js for animation, vector and bitmap drawing?

CreateJS is an open-source toolkit for building HTML5 games with rich interactive experiences. It aims to reduce the development difficulty and cost of HTML5 projects, allowing developers to create a more modern web interactive experience in a familiar way.

CreateJS contains:

EaselJS: for Sprites, animation, vector and bitmap drawing, creating interactive experiences (including multi-touch) on HTML5 Canvas, and providing the "display list" function in Flash.

TweenJS: A simple engine for making Flash-like "tween animations" that generate digital or non-digital continuous changes.

SoundJS: An audio playback engine that can select audio playback methods based on browser capabilities. Treat audio files as modules that can be loaded and unloaded at any time.

PrloadJS: Helps you simplify the preloading of website resources, whether the loading content is graphics, video, sound, JS, data...

The above introduction to Createjs comes from Baidu, but through the introduction, you can know that although CreateJS looks complicated, the four parts have their own functions, the most important of which is EaselJS, and the other three are just for him.

1. How to use EaselJS

First, go to http://createjs.com/ to download the latest version of EaselJS. After downloading and decompressing, you can find easeljs-0.8.1.min.js in the lib folder. At the same time, you can find an examples and tutorials directory in the compressed package. The two directories contain some introductory introductions and examples. If you have English basics, you can take a look. The DOC folder contains all the apis of easeljs. (Similarly, the other three items included in createjs can be obtained, and their directory structure is similar to that of EaselJS).

1. After getting easeljs-0.8.1.min.js, create a new HTML5 file and import it:

2. Entry function and create canvas tag

[html]

</body>

3. Write your own javascript code. In the function init(), you should first use the canvas tag in HTML to create a Stage. All elements used in createjs are added in this stage. After adding, call stage.update () method to make the added element displayed on the page. When creating a Stage, you can directly use the id of the Canvas to create it, or you can call document.getElementById("game") and select the canvas to create it, there is no difference.

function init(){

var stage = new createjs.Stage("game");

.......

stage.update();

}

</script>

animation easelJS.js for animation, vector and bitmap drawing?

Guess you like