EaselJS v0.8.2 API Documentation : EaselJS

你是否正在寻找关于easeljs的内容？让我把最新的东西奉献给你：

Show:

easeljs Module

Defined in:

The EaselJS Javascript library provides a retained graphics mode for canvas including a full hierarchical display list, a core interaction model, and helper classes to make working with 2D graphics in Canvas much easier. easeljs provides straight forward solutions for working with rich graphics and interactivity with HTML5 Canvas...

Getting Started To get started with Easel, create a Stage that wraps a CANVAS element, and add DisplayObject instances as children. easeljs supports:

Images using Bitmap

Vector graphics using Shape and Graphics

Animated bitmaps using

All display objects can be added to the stage as children, or drawn to a canvas directly.

User Interactions
All display objects on stage (except DOMElement) will dispatch events when interacted with using a mouse or touch. easeljs supports hover, press, and release events, as well as an easy-to-use drag-and-drop model. Check out MouseEvent for more information.

Simple Example This example illustrates how to create and position a Shape on the Stage using easeljs drawing API.

//Create a stage by getting a reference to the canvas stage = new createjs.Stage("demoCanvas"); //Create a Shape DisplayObject. circle = new createjs.Shape(); circle.graphics.beginFill("red").drawCircle(0, 0, 40); //Set position of Shape instance. circle.x = circle.y = 50; //Add Shape instance to stage display list. stage.addChild(circle); //Update stage will render next frame stage.update();

Simple Interaction Example

displayObject.addEventListener("click", handleClick); function handleClick(event){ // Click happenened } displayObject.addEventListener("mousedown", handlePress); function handlePress(event) { // A mouse press happened. // Listen for mouse move while the mouse is down: event.addEventListener("mousemove", handleMove); } function handleMove(event) { // Check out the DragAndDrop example in GitHub for more }

Simple Animation Example
This example moves the shape created in the previous demo across the screen.

//Update stage will render next frame createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { //Circle will move 10 units to the right. circle.x += 10; //Will cause the circle to wrap back if (circle.x > stage.canvas.width) { circle.x = 0; } stage.update(); }

Other Features easeljs also has built in support for

Canvas features such as Shadow and CompositeOperation

Ticker, a global heartbeat that objects can subscribe to

Filters, including a provided ColorMatrixFilter, AlphaMaskFilter, AlphaMapFilter, and BlurFilter. See Filter for more information

A ButtonHelper utility, to easily create interactive buttons

SpriteSheetUtils and a SpriteSheetBuilder to help build and manage SpriteSheet functionality at run-time.

Browser Support All modern browsers that support Canvas will support easeljs (). Browser performance may vary between platforms, for example, Android Canvas has poor hardware support, and is much slower on average than most other browsers.

This module provides the following classes:

AlphaMapFilter

AlphaMaskFilter

Bitmap

BitmapText

BlurFilter

ButtonHelper

ColorFilter

ColorMatrix

ColorMatrixFilter

Container

DisplayObject

DisplayProps

DOMElement

easeljs

Filter

Graphics

Graphics.Arc

Graphics.ArcTo

Graphics.BeginPath

Graphics.BezierCurveTo

Graphics.Circle

Graphics.ClosePath

Graphics.Ellipse

Graphics.Fill

Graphics.LineTo

Graphics.MoveTo

Graphics.PolyStar

Graphics.QuadraticCurveTo

Graphics.Rect

Graphics.RoundRect

Graphics.Stroke

Graphics.StrokeDash

Graphics.StrokeStyle

Matrix2D

MouseEvent

MovieClip

MovieClipPlugin

Point

Rectangle

Shadow

Shape

Sprite

SpriteContainer

SpriteSheet

SpriteSheetBuilder

SpriteSheetUtils

SpriteStage

Stage

Text

Touch

UID

以上就是关于easeljs的全部内容，相信你一定会非常满意，。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shenmilingyu/article-6067-1.html