首页 > 代码库 > Canvas应用绚烂效果-creatjs实现
Canvas应用绚烂效果-creatjs实现
js文件
var content;//画布
var stage;//舞台
var spriteSheet;//精灵列表类
var sprite;//精灵
window.onload=function(){
//获取画布
content=document.getElementById_x_x_x_x_x_x("canvas");
//画布上创建舞台
stage=new createjs.Stage(content);
//舞台增加时间监听
//点击鼠标事件监听
stage.addEventListener("stagemousedown",clickStage);
//滑动鼠标事件监听
stage.addEventListener("stagemousemove",moveOnStage);
//创建SpriteSheet数据
var data=http://www.mamicode.com/{
images:["1.png"],
frames:{width:24,height:24,regX:10,regY:10}
}
//创建SpriteSheet类
spriteSheet=new createjs.SpriteSheet(data);
//创建Sprite类
sprite=new createjs.Sprite(spriteSheet);
//设置帧频率
createjs.Ticker.setFPS(20);
//设置帧监听(类似于定时器,进行定时更新舞台)
createjs.Ticker.addEventListener("tick",tick);
}
//帧监听
function tick(e){
var t=stage.getNumChildren();//获得舞台上精灵的数量
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);
}
//点击舞台事件监听
function clickStage(e){
//增加雪花
addSnow(Math.random()*20+100, stage.mouseX,stage.mouseY,2);
}
//在舞台上上移动鼠标事件监听
function moveOnStage(e){
//增加雪花
addSnow(Math.random()*2+1, stage.mouseX,stage.mouseY,1);
}
//count:数量;x:鼠标x位置;y:鼠标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;//鼠标x位置
snow.y=y;//鼠标y位置
snow.scaleX=snow.scaleY=Math.random()+0.3;//缩放尺寸
var a=Math.PI*2*Math.random();//随机弧度
var r=(Math.random()-0.5)*speed*30;//随机半径
snow.vX=Math.sin(a)*r;//偏离x位置的水平距离,此处自己定义,用于显示此雪花偏离鼠标处x位置
snow.vY=Math.cos(a)*r;//偏离Y位置的垂直距离,此处自己定义,用于显示此雪花偏离鼠标处y位置
snow.vS=(Math.random()-0.5)*0.2;//精灵缩放因子的改变因子,此处自己定义
snow.vA=-Math.random()*0.05-0.01;//透明度变化率,此处自己定义
//增加进舞台
stage.addChild(snow);
}
}
Canvas应用绚烂效果-creatjs实现