API 版本: 0.8.2
显示:

EaselJS 模块

定义在: EaselJS:9

JavaScript库easeljs提供了保留图形模式的canvas,包括一个完整的分级显示列表,一个核心的交互模型,以及简化了canvas画布,使其2D图形绘画变得更简单。 easeljs具有丰富的图形,为HTML5 canvas互动工作提供便捷的解决方案...

开始

要开始使用绘画,创建一个舞台,把画布元素, 并添加 DisplayObject 实例作为子元素。easeljs支持以下类:

所有显示对象都可以添加到舞台里,或直接绘制到画布上。

用户交互
在舞台上的所有显示对象(除domelement)调用事件时,使用鼠标或触摸事件。easeljs支持悬停,按下和释放事件。以及一个易于使用的拖放和拖放模式 MouseEvent 查看更多信息事件。

实例

这个例子说明了如何创建一个形状 Shape 和定位在舞台上 Stage 使用easeljs 绘图API.

    //创建一个舞台,得到一个参考的画布
    stage = new createjs.Stage("demoCanvas");
    //创建一个形状的显示对象
    circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 40);
    //形状实例的设置位置
    circle.x = circle.y = 50;
    //添加形状实例到舞台显示列表
    stage.addChild(circle);
    //更新舞台将呈现下一帧
    stage.update();

简单的交互实例

 displayObject.addEventListener("click", handleClick);
 function handleClick(event){
     // 鼠标点击事件
 }

 displayObject.addEventListener("mousedown", handlePress);
 function handlePress(event) {
     // 鼠标移动事件
     // 当鼠标移动时,监听鼠标移动:
     event.addEventListener("mousemove", handleMove);
 }
 function handleMove(event) {
     // 想要使用更多的事件例子,请前往在GitHub
 }

简单的动画实例
这个例子中移动在屏幕前面演示创建的形状。

    //更新舞台将呈现下一帧
    createjs.Ticker.addEventListener("tick", handleTick);

    function handleTick() {
     //圆圈向右边移动10个单位。
        circle.x += 10;
        //将导致圈转回到开始位置
        if (circle.x > stage.canvas.width) { circle.x = 0; }
        stage.update();
    }

其他特征

EaselJS 还支持以下这些:

浏览器支持

所有现代浏览器(http://caniuse.com/canvas)支持画布的将都支持easeljs。例如,浏览器的性能可能会有所不同,安卓画布支持性比较差,会比大多数其他浏览器慢一些。