CreateJS介紹請看CreateJS中文網或者官方網站 一.使用EaselJS 先到官網下載easeljs,也可以點這裡 1.得到easeljs-0.8.1.min.js後，新建一個HTML5文件並導入： 2.入口函數和創建canvas標簽: 3.創建舞臺： 二.使用EaselJS創建圖形和文字 ...
CreateJS介紹請看CreateJS中文網或者官方網站
一.使用EaselJS
先到官網下載easeljs,也可以點這裡
1.得到easeljs-0.8.1.min.js後，新建一個HTML5文件並導入：
<script src="easeljs-0.8.1.min.js"></script>
2.入口函數和創建canvas標簽:
<body onload="init();"> <canvas id="game" width="1000" height="700" style="background-color: white"></canvas> </body>
3.創建舞臺：
<script>
function init(){
var stage = new createjs.Stage("game");
//.......
stage.update();
}
</script>
二.使用EaselJS創建圖形和文字
1.添加文字
var txt = new createjs.Text("HELLO","20px Times","#000"); txt.x = 100; txt.y = 100; txt.text = "hello, world!" ;
這裡先創建了文字，然後又在創建後修改了文字位置，以及內容。
最後一定要把新創建的文字加入到舞臺中，不然無法顯示：
stage.addChild(txt);
2.添加圖形
圖形包括代碼繪製的適量圖（如一個圓，一個矩形）和png、jpg等格式的圖片
這裡先說代碼繪製的適量圖，圖片後面再學習：
var shape = new createjs.Shape();
shape.graphics.beginStroke("#000").beginFill("#ff0000").drawRect(0, 0, 100, 100);
可以查看API修改shape的位置、大小、透明度、旋轉、錨點等屬性。
三.容器Container
Container是一個容器，可以包含Text、Bitmap、Shape、Sprite等其他的EaselJS元素，包含在一個Container中方便統一管理，比如你要做一個按鈕，按鈕圖形和上面的提示文字包含在一個Container中，可以統一移動或者顯示隱藏，比如：
var button = new createjs.Container(); //創建一個文本 var label = new createjs.Text("OK","20px Times","#000"); label.textAlign = 'center'; label.textBaseline = 'middle'; //創建一個適量圓 var shape = new createjs.Shape(); shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 50); shape.shadow = new createjs.Shadow("#000",5,5,8); //將圓和文本添加到button容器。這裡一定要先添加shape，畫布渲染順序原因，先文本的話，圓在上層，文本就會被遮住 button.addChild(shape,label);
button.x = 100; stage.addChild(button);
按照上面的代碼可以創建了一個按鈕，我們設置了button.x = 100，發現圓和文字同時向右移動了100，這就是Container的好處。
下麵我們添加一些簡單功能：
如果想讓滑鼠經過時顯示一個小手的形狀我們可以這樣：
button.cursor = "pointer"; //這句代碼不添加的話，上面的事件是不會生效的 stage.enableMouseOver();
四.添加事件監聽和Ticker
想要與stage中的元素交互只需要給他們添加addEventListener，例如點擊，滑鼠划過等等，而對於stage本身，有個特別的事件"tick"，給stage設置tick相當於javascript中的SetInterval，定時的運行一個函數，可以用來定時的刷新stage,即運行stage.update()。一個比較常用的方法也是一個最簡單的游戲框架一般都是這樣：
<script>
var stage;
function init(){
stage = new createjs.Stage('game');
stage.enableMouseOver();
//setFPS方法已過時
//createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
}
function update(event){
stage.update();
}
</script>
假如我們要監聽前面創建button的點擊事件，這樣做就可以了：
button.addEventListener("click",function(e){
alert("ok");
});
還可以添加滑鼠滑過等事件監聽，（這裡使用on方法添加，on方法是addEventListener的一個簡單的形式）：
button.on("mouseover",function(e){
button.alpha = 0.5;
});
button.on("mouseout",function(e){
button.alpha = 1;
});
五.應用：做一個簡單的畫板工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/easeljs.js"></script> <style> *{margin: 0;padding: 0;} html,body{width: 100%;height: 100%;} #myCanvas{background: #1d292c;} </style> </head> <body onload="init()"> <canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById("myCanvas"); var stage = new createjs.Stage(canvas); var drawingCanvas,oldPt,oldMidPt,title,color,stroke,colors,index; var vw,vh; function init() { canvasChange(); index = 0; colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"]; stage.autoClear = false; stage.enableDOMEvents(true); createjs.Touch.enable(stage); //允許觸控 drawingCanvas = new createjs.Shape(); stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemouseup", handleMouseUp); title = new createjs.Text("Click and Drag to draw", "36px Arial", "#777777"); title.x = 300; title.y = 200; stage.addChild(title); stage.addChild(drawingCanvas); stage.update(); } function update(e) { stage.update(); } function canvasChange() { vw = document.body.clientWidth; vh = document.body.clientHeight; canvas.width = vw; canvas.height = vh; stage.update(); } function handleMouseDown(event) { if (!event.primary) { return; } if (stage.contains(title)) { stage.clear(); stage.removeChild(title); } color = colors[(index++) % colors.length]; stroke = Math.random() * 30 + 10 | 0; oldPt = new createjs.Point(stage.mouseX, stage.mouseY); oldMidPt = oldPt.clone(); stage.addEventListener("stagemousemove", handleMouseMove); } function handleMouseMove(event) { if (!event.primary) { return; } var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1); drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); oldPt.x = stage.mouseX; oldPt.y = stage.mouseY; oldMidPt.x = midPt.x; oldMidPt.y = midPt.y; stage.update(); } function handleMouseUp(event) { if (!event.primary) { return; } stage.removeEventListener("stagemousemove", handleMouseMove); } </script> </body> </html>
說明：本篇文章只是個人學習筆記，原創文章在這裡
