Createjs的控件 BitMap、MovieClip、Sprite
Createjs控件
一、BitMap控件 ?????? 掌握了BitMap之后，我們可以快速的對圖片做處理。 ????? 1、首先準備一張我們需要引入的照片，在HTML代碼中引入easeljs文件。 <script src="js/easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script> 2、使用canvas標簽創建stage
var stage = new createjs.Stage("canvas"); 3、創建一個容器Container,并且將該容器放進stage中，代碼如下： var gameView = new createjs.Container();stage.addChild(gameView); 4、使用控件Bitmap引入我們需要的圖片，并且將該圖片放進Container中 var bitmap = new createjs.Bitmap("img/image.jpg");gameView.addChild(bitmap); 5、最后使用Ticker??事件監聽（給stage設置tick,相當于js中的setInterval,定時運行一個函數），我們用來定時的刷新stage; createjs.Ticker.setFPS(30); createjs.Ticker.addEventListener("tick",function(){stage.update();})
最終圖片顯示，加載成功；
二、MovieClip控件：影片剪輯
掌握了MovieClip可以更好地處理動畫。
TweenJS類庫主要用來調整和動畫HTML5和Javascript屬性。
1.首先 我們需要引入三個js文件，分別為：easelJS、tweenJS、movieclipJS.
<script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="tweenjs-0.6.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="movieclip-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>2.在body中寫一個canvas，且引入我們寫邏輯處理的js的文件。
<canvas id="movieClip" width="400px" height="400px"></canvas> <script src="movieClip.js" type="text/javascript" charset="utf-8"></script>3.?使用canvas標簽創建stage
4、使用Ticker??事件監聽（給stage設置tick,相當于js中的setInterval,定時運行一個函數），我們用來定時的刷新stage;代碼如下：
5.創建MovieClip,并且添加給stage
6.繪畫出2個圓。以0.100為原點半徑為30，代碼如下：
var state1 = new createjs.Shape(new createjs.Graphics().beginFill("#999999").drawCircle(0, 100, 30)); var state2 = new createjs.Shape(new createjs.Graphics().beginFill("#555555").drawCircle(0, 100, 30));7.設置他們從不同的位置開始做動畫效果，這個Timeline類同步多個(tweens)漸變并允許它們作為一個整體被控制。
mc.timeline.addTween(createjs.Tween.get(state1).to({x: 0}).to({x: 400}, 100).to({x: 0}, 100)); mc.timeline.addTween(createjs.Tween.get(state2).to({x: 400}).to({x: 0}, 100).to({x: 400}, 100));ps:
state1:從x為0 的地方開始運動，運動到400的地方（整個畫布的寬度），所用的時間線是100，然后在用100的時間線回到x=0的地方；
state2:從x = 400的地方開始運動，運動到x = 0,所用時間線為100，然后再返回x = 400的地方。
這樣看來，是兩個不同顏色的圓球在相對運動，他們會在x = 200，時間線為50 的地方重合，如此反復的做運動。
8.最后用gotoAndPlay,表示這個時間表沒有停頓的跳轉到指定的位置或標簽。
mc.gotoAndPlay("stop");效果如下：
三、Sprite? 控件
起。顯示一個幀或幀序列（即動畫）從spritesheet實例。精靈片是一系列的圖像（通常是動畫幀）合并成一個單一的圖像。例如，一個動畫由8 100x100圖像可以組合成一個400X200精靈表（4幀在2高）。 你可以顯示單個幀，播放幀作為一個動畫，甚至序列動畫一起。例如：
1、首先引入需要的easeljs文件
2、寫一個canvas，引入我們寫邏輯處理的js文件
<head><meta charset="UTF-8"><script src="easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script><title></title></head><body><canvas id="sprite" width="960px" height="400px"></canvas><script src="app.js" type="text/javascript" charset="utf-8"></script></body>3.
var stage = new createjs.Stage("sprite"); //創建出SpriteSheet var ss = new createjs.SpriteSheet({"images":["spritesheet_grant.png"],"frames":{"height":292, //每個圖的高度為292，寬度為165，一共有64張圖"width":165,"count":64},"animations":{"run":[0,25,"jump"], //0幀到25幀是跳"jump":[26,63,"run"] //26幀到63幀是跑}});4、
效果如下：
是一個小人跑跳的動畫，這樣就完成了。
總結
以上是生活随笔為你收集整理的Createjs的控件 BitMap、MovieClip、Sprite的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java设计模式及应用场景之《抽象工厂模
- 下一篇： Win Server 2003搭建Sql