初识createJS

来源：互联网发布：北京交通流量数据编辑：程序博客网时间：2024/05/23 16:18

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();}

以下是效果：
这里写图片描述

以上只是一个简单的小demo；具体用法和实例请访问createjs的官网:http://www.createjs.com/

阅读全文

0 0