easeljs的基础

最新推荐文章于 2024-05-09 09:46:24 发布

bboyjoe

最新推荐文章于 2024-05-09 09:46:24 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/bboyjoe/article/details/46671305

版权

createjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先创建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文件

//创建stage
var stage=new createjs.Stage("gameView");
//创建container
var 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文件

//创建stage
var stage=new createjs.Stage("gameView");
//创建container
var 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文件

//创建stage
var stage=new createjs.Stage("gameView");
//创建container
var 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();

}

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

bboyjoe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easeljs的基础

首先创建html文件，引入esealjs文件，添加canvas标签 easelJs的容器 #gameView{ background-color: #0088bb; } 1）esealjs的容器的使用创建container.js文件//创建stag
复制链接

扫一扫