Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use createjs in javascript, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Introduction to createjs

Official website: http://www.createjs.cc/

The createjs consists of the following four parts:

EaselJS: for Sprites, animation, vector and bitmap drawing, creating an interactive experience on HTML5 Canvas (including multi-touch)

TweenJS: for animation effects

SoundJS: audio playback engine

PreloadJS: preload website resources

Similar to SoundJS,PreloadJS, you can also write it yourself if it is convenient for you to deal with it. Generally speaking, they are equivalent to an auxiliary function, with or without choice. Therefore, this article focuses on the use of EaselJS.

1. Approximate api of EaselJS

For drawing pictures (Bitmap)

Use (Shape) to draw graphics, such as rectangles, circles, etc. [similar to changing coordinates, increasing shadow shadow, transparency alpha, zooming out and magnifying scaleX/scaleY]

Draw words, with (Text)

There is also the concept of container Container, which can contain multiple display objects.

2. The general flow of EaselJS drawing

General process: create display object → set some parameters → call method draw → add to stage → update (), the code is as follows:

/ / introduce the related js file canvas = document.querySelector ('# canvas' stage = rect = rect.graphics.beginFill ("# f00"). DrawRect (0,0,100, 100stage.update ()

Graphics can set some styles, line width, color, etc., you can also call some methods to draw graphics, such as rectangular drawRect, circular drawCircle, etc., you can check the api.

Note: remember to add the shape object to the stage, otherwise it will not be displayed on the screen.

3. Ticker timer

The one you will definitely encounter when writing createjs is ticker, which mainly refreshes the stage regularly. The ideal frame rate is 60FPS.

Createjs.Ticker.setFPS (60)

4. Controls the hierarchical relationship of multiple display objects

The stage,contain object has a children attribute that represents child elements, which is an array in which the element level starts at 0 like a subscript, which simply overrides the front, and the addChild method is added to the end of the display list.

We can also dynamically change the cascading effect of children.

Stage.setChildIndex (red,1)

5. Container container

It can contain Text, Bitmap, Shape, Sprite and other EaselJS elements, which are included in a Container to facilitate unified management.

For example, a character is made up of hands, feet, head and body. You can put these parts in the same container and move them together. It is also relatively easy to use:

Var contain = new createjs.Container (); contain.addChild (bgImg); contain.addChild (bitmap); stage.addChild (contain)

The focus of this article is to draw and process the image.

6. Draw a picture

Var bg = new createjs.Bitmap (". / background.png"); stage.addChild (bg); stage.update ()

According to the normal drawing process of the above EaselJS, the above code should display normally. However, it can only be displayed normally in some cases. The image resource needs to be sure that it is loaded successfully before it can be new, otherwise there will be no image on the canvas. If there is a resource preload, you can directly use the above code. If not, you need to draw after the onload is loaded by image.

Var img = new Image (); img.src ='. / img/linkgame_pass@2x.png';img.onload = function () {var bg = new createjs.Bitmap (". / background.png"); stage.addChild (bg); stage.update ();}

It's not enough to just draw pictures. Createjs provides several ways to process pictures:

6.1 add a mask layer to the picture

Using the mask property, you can display only the areas where the picture intersects the shape

Stage = new createjs.Stage ("gameView"); bg = new createjs.Bitmap (". / img/linkgame_pass@2x.png"); bg.x = 10 / shape / mask pattern shape = new createjs.Shape (); shape.graphics.beginFill ("# 000"). DrawCircle (0,0,100); shape.x = 200 shape.y = 100scape bg.mask = shape; / / add a mask to the picture bg (shape); stage.addChild (bg) Stage.update ()

Common application scenarios: used to clip pictures, such as displaying round pictures, etc.

6.2 add a filter to the picture

Var blur = new createjs.BlurFilter; bg.filters = [blur]

We found that the picture is still not blurred, because the stage refreshes immediately after the picture is added with filter, and the filter can only maintain the effect of one frame, and the second frame filter is invalid. After using the cache () method of the picture, no matter how the stage is refreshed, the effect of Filter can be maintained. Adding cache has many functions, such as improving FPS, cache and so on.

Bg.cache (0pr 0pr bg.image.width.bg.image.height)

6.3 clip pictures using Rectangle

Use EaselJS's built-in Rectangle object to create a marquee that displays parts of the picture.

Stage = new createjs.Stage ("gameView"); bg = new createjs.Bitmap (". / img/linkgame_pass@2x.png"); bg.x = 10 * bg.y = 10 * new createjs.Rectangle (0,0,121,171); bg.sourceRect = rect;stage.addChild (bg); stage.update ()

Applicable scene: jigsaw puzzle Mini Game, clipping pictures …...

7. Createjs event

Easeljs events are not supported for touch devices by default, and the following code is required to support them:

Createjs.Touch.enable (stage)

For objects such as Bitmap,Shape, you can use addEventListener to listen for events directly.

Bitmap = new createjs.Bitmap (''); bitmap.addEventListener ('click',handle)

8. Rendering mode of CreateJs

CreateJs provides two rendering modes, one is to use setTimeout, the other is to use requestAnimationFrame, the default is setTimeout, and the default number of frames is 20. Generally speaking, it doesn't matter, but if you set the animation to requestAnimationFrame mode, you will feel that the animation is as smooth as silk.

9. Adaptation

In mobile development, we have to face a multi-screen, multi-size problem, so the adaptation problem is particularly important.

Note that the width,height of the above code is different from the width,height in css.

For example, if you draw a picture inside the canvas and position it with the XMagol y axis, which is relative to canvas as a whole.

Let's use canvas as a whole picture and use css to adapt.

Canvas {width: 100%;}

In that case, there will be the following effect, canvas will adapt to the screen size, the picture inside will be proportionally larger and smaller.

Thank you for reading this article carefully. I hope the article "how to use createjs in javascript" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.