初识createJS

最新推荐文章于 2022-11-10 18:46:33 发布

liugang0605

最新推荐文章于 2022-11-10 18:46:33 发布

阅读量537

点赞数

分类专栏： js 动画文章标签： html5 动画

本文链接：https://blog.csdn.net/power8988/article/details/78082923

版权

js 同时被 2 个专栏收录

113 篇文章 2 订阅

订阅专栏

动画

10 篇文章 0 订阅

订阅专栏

CreateJS是基于HTML5开发的一套模块化的库和工具。
基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。
这里我引用cdn上的链接；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="app.js">
//这里写主要的代码
</script>
</body>
</html>

计划写一个自增的小效果，最初我们将创建canvas画布，承载画布的舞台stage和需要展示的文字：

var canvas,stage,txt;

window.onload=function(){
//    获取画布canvas=document.getElementById("canvas");
//  获取舞台
    stage=new createjs.Stage(canvas);
    //创建文字和相关样式
    txt=new createjs.Text("number-0>","20px Arial","#ff7700");
    //将文字挂载到舞台上
    stage.addChild(txt);
    //设定文字变化的频率
    createjs.Ticker.setFPS(30);
 //创建事件，这里将调用tick事件  createjs.Ticker.addEventListener("tick",tick);
}

接下来就是写tick事件

var count=0;
function tick(e){
    count++;
    txt.text="number->"+count+"!";
    stage.update();
}

这里的tick主要负责文字的自增；
为了演示，我封装成点击按钮开始动画，画布为银色；

var canvas,stage,txt;
var starBtn=document.getElementById("startBtn");
window.onload=function(){
    starBtn.addEventListener("click",startIncrease);
}
function startIncrease(){
    canvas=document.getElementById("canvas");
    stage=new createjs.Stage(canvas);
    txt=new createjs.Text("number-0>","20px Arial","#ff7700");
    stage.addChild(txt);
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick",tick);
}
var count=0;
function tick(e){
    count++;
    txt.text="number->"+count+"!";
    stage.update();
}