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 还支持以下这些:

浏览器支持

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