easeljs的基础

来源：互联网发布：同志手机聊天软件编辑：程序博客网时间：2024/05/20 11:48

首先创建html文件，引入esealjs文件，添加canvas标签

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>easelJs的容器</title>    <script src="easeljs-0.8.1.min.js"></script>    <script src="childContainer.js"></script>    <script src="circle.js"></script>    <style>        #gameView{            background-color: #0088bb;        }    </style></head><body><canvas id="gameView" width="400px" height="400px"></canvas><script src="container.js"></script></body></html>

1）esealjs的容器的使用

创建container.js文件

//创建stagevar stage=new createjs.Stage("gameView");//创建containervar gameView=new createjs.Container();//移动container的坐标位置gameView.x=100;gameView.y=100;//将container添加到stage中stage.addChild(gameView);//创建childContainer对像var c=new childContainer();//将图形添加到container中gameView.addChild(c);stage.update();

创建childContainer.js文件

function childContainer(){    var Rect=new createjs.Shape();    Rect.graphics.beginFill("#FF0000");    Rect.graphics.drawRect(0,0,50,50);    Rect.graphics.endFill();    var Text=new createjs.Text("1","30px Arial","#ffffff");    this.addChild(Rect);    this.addChild(Text);}childContainer.prototype=new createjs.Container();

效果如下

2）绘图

创建childContainer.js文件

//创建stagevar stage=new createjs.Stage("gameView");//创建containervar gameView=new createjs.Container();//将container添加到stage中stage.addChild(gameView);//创建子视图对像var cl=new Circle();cl.setCircleType(Circle.TYPE_GREEN);//将图形添加到container中gameView.addChild(cl);stage.update();

创建circle.js子视图文件

function Circle(){    createjs.Shape.call(this);    this.setCircleType=function(type){        switch(type){            case Circle.TYPE_RED:                this.setColor("#FF0000");                break;            case Circle.TYPE_GREEN:                this.setColor("#00ff00");                break;        }    }    this.setColor=function(color){        this.graphics.beginFill(color);        this.graphics.drawCircle(100,100,50);        this.graphics.endFill();    }    this.setCircleType(Circle.TYPE_RED);}Circle.prototype=new createjs.Shape();Circle.TYPE_RED=1;Circle.TYPE_GREEN=2;

效果如下：

3）事件：

以计时器事件为例

创建tick.js文件

//创建stagevar stage=new createjs.Stage("gameView");//创建containervar gameView=new createjs.Container();//将container添加到stage中stage.addChild(gameView);    var Rect=new createjs.Shape();    Rect.graphics.beginFill("#ffffff");    Rect.graphics.drawRect(0,0,100,100);    Rect.graphics.endFill();gameView.addChild(Rect);stage.update();    createjs.Ticker.setFPS(20);    createjs.Ticker.addEventListener("tick",handlerTick);var speedX=10;function handlerTick(){    if(Rect.x<=0){        speedX=Math.abs(speedX);    }    if(Rect.x>=300){        speedX=-Math.abs(speedX);    }    Rect.x +=speedX;    stage.update();}

效果如下：白色矩形框在画布来回滚动

0 0