使用CreateJS繪製圖形

乞力馬紮羅的雪CYF發表於2015-09-28
JS

    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  。歡迎大家訪問！

相關文章