js文件
var content;//畫布
var stage;//舞臺
var spriteSheet;//精靈列表類
var sprite;//精靈
window.οnlοad=function(){
??? //獲取畫布
??? content=document.getElementById_x_x_x_x_x_x("canvas");
??? //畫布上創(chuàng)建舞臺
??? stage=new createjs.Stage(content);
??? //舞臺增加時間監(jiān)聽
??? //點擊鼠標(biāo)事件監(jiān)聽
??? stage.addEventListener("stagemousedown",clickStage);
??? //滑動鼠標(biāo)事件監(jiān)聽
??? stage.addEventListener("stagemousemove",moveOnStage);
??? //創(chuàng)建SpriteSheet數(shù)據(jù)
??? var data={
??????? images:["1.png"],
??????? frames:{width:24,height:24,regX:10,regY:10}
??? }

??? //創(chuàng)建SpriteSheet類
??? spriteSheet=new createjs.SpriteSheet(data);
??? //創(chuàng)建Sprite類
??? sprite=new createjs.Sprite(spriteSheet);
??? //設(shè)置幀頻率
??? createjs.Ticker.setFPS(20);
??? //設(shè)置幀監(jiān)聽（類似于定時器，進(jìn)行定時更新舞臺）
??? createjs.Ticker.addEventListener("tick",tick);
}

//幀監(jiān)聽
function tick(e){
??? var t=stage.getNumChildren();//獲得舞臺上精靈的數(shù)量
??? for(var i=t-1;i>=0;i--){
??????? var snow=stage.getChildAt(i);
??????? //計算XY的偏移位置
??????? snow.vY+=2;
??????? snow.vX+=1;
??????? //重定位x,y的位置
??????? snow.x+=snow.vX;
??????? snow.y+=snow.vY;
??????? //重定義縮放
??????? snow.scaleX=snow.scaleY=snow.vS+snow.scaleX;
??????? //重定義透明度
??????? snow.alpha+=snow.vA;
??????? //判斷是否消除
?????? if(snow.alpha<=0||snow.y>=content.height||snow.x>=content.width){
??????????? //由舞臺刪除
??????????? stage.removeChildAt(i);
??????? }
??? }
??? //更新舞臺
??? stage.update(e);
}

//點擊舞臺事件監(jiān)聽
function clickStage(e){
??? //增加雪花
??? addSnow(Math.random()*20+100, stage.mouseX,stage.mouseY,2);
}

//在舞臺上上移動鼠標(biāo)事件監(jiān)聽
function moveOnStage(e){
??? //增加雪花
??? addSnow(Math.random()*2+1, stage.mouseX,stage.mouseY,1);
}

//count:數(shù)量;x:鼠標(biāo)x位置;y:鼠標(biāo)y位置;speed:速度;
function addSnow(count,x,y,speed){
??? for(var i=0;i
??????? var snow=sprite.clone();
??????? snow.alpha=Math.random()*0.5+0.5;//透明度
??????? snow.x=x;//鼠標(biāo)x位置
??????? snow.y=y;//鼠標(biāo)y位置

??????? snow.scaleX=snow.scaleY=Math.random()+0.3;//縮放尺寸

??????? var a=Math.PI*2*Math.random();//隨機(jī)弧度
??????? var r=(Math.random()-0.5)*speed*30;//隨機(jī)半徑

??????? snow.vX=Math.sin(a)*r;//偏離x位置的水平距離,此處自己定義，用于顯示此雪花偏離鼠標(biāo)處x位置
??????? snow.vY=Math.cos(a)*r;//偏離Y位置的垂直距離,此處自己定義，用于顯示此雪花偏離鼠標(biāo)處y位置

??????? snow.vS=(Math.random()-0.5)*0.2;//精靈縮放因子的改變因子,此處自己定義
??????? snow.vA=-Math.random()*0.05-0.01;//透明度變化率,此處自己定義
??????? //增加進(jìn)舞臺
??????? stage.addChild(snow);
??? }
} ? ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/Eudora/p/4103261.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Canvas应用绚烂效果-creatjs实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。