使用CreateJS绘制图形

来源：互联网发布：部落冲突皮卡超人数据编辑：程序博客网时间：2024/06/05 05:44

CreateJS是JavaScript中一个绘制图形非常方便的框架现在我们结合HTML中的canvas和JavaScript来绘制图形。

（1）首先可以从官网上下载对应的包，http://www.createjs.com/ 。其实CreateJS包含四种不同的库，分别是EaselJS，TweenJS，SoundJS，PreloadJS。我们现在只要用到第一个就可以了。我也提供了百度网盘的下载 http://pan.baidu.com/s/1hq52ob6 。

（2）在IDEA中新建一个Static Web项目，并把CreateJS-->lib-->***min.js拷贝到项目中。

（3）新建HTML文件，实现代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>使用CreateJS</title>    <script src="easeljs-0.8.1.min.js"></script></head><body>    <canvas id="canvas" width="500px" height="500px"></canvas>    <script src="app.js"></script></body></html>

（4）新建JS文件，实现代码如下：

/** * Created by chenyufeng on 15/9/28. */var canvas;var stage;var txt;var count = 0;window.onload = function(){    canvas = document.getElementById("canvas");    stage = new createjs.Stage(canvas);    txt = new createjs.Text("number->","20px Arial","#ff7700");    //把文本加入到舞台中    stage.addChild(txt);    createjs.Ticker.setFPS(30);    createjs.Ticker.addEventListener("tick",tick);//事件监听；};function tick(){    count++;    txt.text = "number->" + count;    stage.update();}

（5）最后的运行效果如下：

。

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！

1 0