Canvas应用绚烂效果-creatjs实现

标签：io   ar   os   sp   for   strong   文件   数据   on   

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={
        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实现

标签：io   ar   os   sp   for   strong   文件   数据   on   

原文地址：http://www.cnblogs.com/Eudora/p/4103261.html