easeljs中text控件示例

来源：互联网发布：德卡斯特里奥算法编辑：程序博客网时间：2024/05/20 10:54

先编写html文件，引入相应的easeljs文件，添加canvas标签

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

再编写js代码

var canvas,stage,text,rect;var count=0;canvas=document.getElementById("gameView");//创建stagestage=new createjs.Stage(canvas);//创建text对象text=new createjs.Text("text on the canvas...0!","36px Arial","#fff");text.x=50;text.y=50;text.rotation=20;stage.addChild(text);//创建矩形对象rect=new createjs.Shape();rect.x=text.x;rect.y=text.y;rect.rotation=text.rotation;stage.addChildAt(rect,0);createjs.Ticker.setFPS(20);createjs.Ticker.addEventListener("tick",handlerTick);function handlerTick(e){    count++;    text.text="text on the canvas..."+count+"!";    rect.graphics.clear().beginFill("#f00").drawRect(-10,-10,text.getMeasuredWidth()+20,50);    stage.update(e);}

最后效果如图：

0 0