easeljs中text控件示例_easeljs new createjs.text-优快云博客

本文介绍如何使用EaselJS创建动态文本效果。通过编写HTML和JavaScript代码，实现了带有旋转文本和更新计数器功能的简单动画。同时，还演示了如何通过事件监听更新文本内容并调整背景矩形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先编写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");
//创建stage
stage=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);
}

最后效果如图：