做一个canvas的炫酷效果 可是有几个代码不是很明白 希望大神可以解答一下 谢谢大家
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); //点击画布
stage.addEventListener("stagemousemove",moveCanvas); //在画布上移动v
var data={ //data序列 数据
images:["1.jpg"],
frames:{width:20,height:20,regX:10,regY:10} //reg？ 变化区域？这里怎么理解呢？？？
};
sprite=new createjs.Sprite(new createjs.SpriteSheet(data)); //css精灵 网页图片应用处理方式 它将一个页面涉及到的所有零星图片都包含到一张大图中去
createjs.Ticker.setFPS(20); //设置和获取getFPS帧频的函数
createjs.Ticker.addEventListener("tick",tick);
}
function tick(e) {
var t=stage.getNumChildren();// 移动或者点击时候所产生的数量
for (var i=t-1;i>0;i--){ //对每一个进行设计 ； 不懂这个循环？？？
var s=stage.getChildAt(i);
s.vY+=2; //横坐标较宽
s.vX+=1; //
s.x+=s.vX; //
s.y+=s.vY; //每一个小方块出现的位置
s.scaleX=s.scaleY=s.scaleX+s.vS; //同时变化 不变形
s.alpha+=s.vA;
if (s.alpha<=0||s.y>canvas.height){ //透明度<=0 或者 超出容器的的底部 >height //消除小方块
stage.removeChildAt(i); //移除当前的
}
}
stage.update(e); //舞台更新
}
function clickCanvas(e) {
//function addS(count,x,y,speed) 点击事件/ /
addS(Math.random()*200+100,stage.mouseX,stage.mouseY,2); //数量多
}
function moveCanvas(e) {
//function addS(count,x,y,speed) 点击事件//
addS(Math.random()*2+1,stage.mouseX,stage.mouseY,1); //数量少
}
function addS(count,x,y,speed) {
for (var i=0;i<count;i++){
var s=sprite.clone();//clone克隆/复制方法作用是执行后将复制一份当前对象,并返回
s.x=x; //出现的位置 X
s.y=y; // Y
s.alpha=Math.random()*0.5+0.5; // 透明度 alpha; math.random 随机数； 产生的数乘以 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 全圆 ；滑动的曲线 ；变化的范围
var v=(Math.random()-0.5)*30*speed;//速度 ；点击速度和滑动速度不一样 ; -0.5 范围小 速度慢一半 ;*30 表示有30个同样的小方块出现
s.vX=Math.cos(a)*v; // X坐标； +y坐标 得到曲线的变化 这里怎么理解呢？
s.vY=Math.sin(a)*v; // Y坐标 同上 这里怎么理解呢？
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); //切记 添加在舞台
}
}
