var canvas;
var stage;
var img=new Image();
var sprite;
window.onload=function () {
? ?canvas=document.getElementById("canvas");
? ?stage=new createjs.Stage("canvas");

? ?stage.addEventListener("stagemousedown",clickCanvas); ?//點(diǎn)擊畫布
? ?stage.addEventListener("stagemousemove",moveCanvas); ? //在畫布上移動(dòng)v

? ?var data={ ? //data序列 ?數(shù)據(jù)
? ? ? ?images:["1.jpg"],
? ? ? ?frames:{width:20,height:20,regX:10,regY:10} ?//reg？ 變化區(qū)域？這里怎么理解呢？？？

? ?};
? ?sprite=new createjs.Sprite(new createjs.SpriteSheet(data)); ?//css精靈 網(wǎng)頁圖片應(yīng)用處理方式 它將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去
? ?createjs.Ticker.setFPS(20); //設(shè)置和獲取getFPS幀頻的函數(shù)
? ?createjs.Ticker.addEventListener("tick",tick);



}

function tick(e) {
? ?var t=stage.getNumChildren();// 移動(dòng)或者點(diǎn)擊時(shí)候所產(chǎn)生的數(shù)量
? ?for (var i=t-1;i>0;i--){ ? //對(duì)每一個(gè)進(jìn)行設(shè)計(jì) ； 不懂這個(gè)循環(huán)？？？
? ? ? ?var s=stage.getChildAt(i);

? ? ? ?s.vY+=2; ? //橫坐標(biāo)較寬
? ? ? ?s.vX+=1; ?//
? ? ? ?s.x+=s.vX; //
? ? ? ?s.y+=s.vY; ? //每一個(gè)小方塊出現(xiàn)的位置

? ? ? ?s.scaleX=s.scaleY=s.scaleX+s.vS; ?//同時(shí)變化 不變形
? ? ? ?s.alpha+=s.vA;

? ? ? ?if (s.alpha<=0||s.y>canvas.height){ ?//透明度<=0 或者 超出容器的的底部 >height ?//消除小方塊
? ? ? ? ? ?stage.removeChildAt(i); ?//移除當(dāng)前的

? ? ? ?}



? ?}

? ?stage.update(e); ?//舞臺(tái)更新
}

function clickCanvas(e) {
? ?//function addS(count,x,y,speed) ?點(diǎn)擊事件/ /
? ?addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2); ?//數(shù)量多
? ?
}

function moveCanvas(e) {
? ?//function addS(count,x,y,speed) ?點(diǎn)擊事件//
? ?addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1); ? //數(shù)量少
? ?
}

function addS(count,x,y,speed) {
? ?for (var i=0;i<count;i++){
? ? ? ?var s=sprite.clone();//clone克隆/復(fù)制方法作用是執(zhí)行后將復(fù)制一份當(dāng)前對(duì)象,并返回
? ? ? ?s.x=x; ?//出現(xiàn)的位置 ?X
? ? ? ?s.y=y; ?// ? Y
? ? ? ?s.alpha=Math.random()*0.5+0.5; ?// 透明度 alpha; math.random 隨機(jī)數(shù)； 產(chǎn)生的數(shù)乘以 0.5 半透明 值越小越透明 ； +0.5 變化慢 值越大越慢
? ? ? ?s.scaleX=s.scaleY=Math.random()+0.3;//scale 縮放 x=y 不變形 ?；0.3 防止太小

? ? ? ?var a=Math.PI*2*Math.random(); ?//PI半圓； *2 全圓 ；滑動(dòng)的曲線 ；變化的范圍
? ? ? ?var v=(Math.random()-0.5)*30*speed;//速度 ；點(diǎn)擊速度和滑動(dòng)速度不一樣 ; -0.5 范圍小 速度慢一半 ?;*30 表示有30個(gè)同樣的小方塊出現(xiàn)

? ? ? ?s.vX=Math.cos(a)*v; ?// X坐標(biāo)； +y坐標(biāo) 得到曲線的變化 ?這里怎么理解呢？
? ? ? ?s.vY=Math.sin(a)*v; ? // Y坐標(biāo) ? 同上 ? ?這里怎么理解呢？
? ? ? ?s.vS=(Math.random()-0.5)*0.2; ?//scale 縮放 -0.5 總體值越小縮放越??； //變化的小方塊
? ? ? ?s.vA=-Math.random()*0.05-0.01; //alpha ?透明度 ?總體值越大越透明 越好看；-0.01 速度慢 ? //變化的小方塊

? ? ? ?stage.addChild(s); ?//切記 添加在舞臺(tái)


? ?}

? ?
}