canvas粒子动画顺序
1.canvas绘图
2.选出合适的粒子
3.记录粒子的坐标,让粒子的坐标随时间变化起来,绘制出每一个时间段的粒子
原理(代码分析过程)
1.var canvas=document.getElementById(“myCanvas”);//获取canvas
2.var ctx=canvas.getContext(“2d”);//获取canvas画布渲染上下文
下面就把canvas叫画布,cts就是个画笔
3.ctx.drawImage(image.self, image.x, image.y);//ctx将image渲染到canvas上,我就觉得是浏览器拿着ctx画笔照着image画到canvas画布的指定位置
4.var imageData=ctx.getImageData(image.x,image.y,image.w,image.h);//imageData存储了获取到的指定位置,指定大小的canvas的信息
imageData.data存放了每一个像素的rgba的信息
r,g,b,a,r,g,b,a,r,g,b,a…….
每一个色值占据data数组索引的一个位置,一个像素有个4个值(R、G、B、A)占据数组的4个索引位置。
Rij = [(j-1)*imageData.width + (i-1)]*4 ,
Gij = [(j-1)*imageData.width + (i-1)]*4 + 1,
Bij = [(j-1)*imageData.width + (i-1)]*4 + 2,
Aij = [(j-1)*imageData.width + (i-1)]*4 + 3 。
5.筛选要留下的粒子保存到一个数组pars中
根据粒子的像素信息,或者位置信息选择合适的
筛选条件:dataPx[pos]>170||dataPx[pos+1]>150(像素点红色大于170或者绿色大于150)的留下
for (var i = 0; i < cols; i++) {
for (var j = 0; j < rows; j++) {
pos=[(j*s_height-1)*image.w+(i*s_width)]*4;
if (dataPx[pos]>170||dataPx[pos+1]>150) {//合适的像素点的条件
//保存当前像素点的位置和填充颜色
var particle={
//最终位置,粒子在单元格内左右位置随机
x:image.x+i*s_width+(Math.random()-0.5)*20,
y:image.y+j*s_height+(Math.random()-0.5)*20,
//x:image.x+i*s_width,
//y:image.y+j*s_height,
x0:image.startX,
y0:image.startY,//像素运动之前位置初始值 fillStyle:obj.fillStyle||'rgba('+dataPx[pos]+','+dataPx[pos+1]+','+dataPx[pos+2]+','+dataPx[pos+3]+')',
//以下属性是使粒子分散运动
delay:j/20,
currTime:0,
count:0,
duration:parseInt(duration/16.66)+1,
interval:parseInt(Math.random() * 10 *interval)
}
particles.push(particle);
}
}
}
6.使pars中的粒子对象分散的运动起来
参考代码:
var timer=window.setInterval(draw, 20);
function draw(){
//清空当前画布------->如果不清可以看见粒子运动轨迹
ctx.clearRect(0, 0, canvas.w, canvas.h);
var len=particles.length;//获取到的像素点的个数
var particle=null;//当前像素点
var cur_x,cur_y;
var duration=obj.duration;
var dotX=obj.dotX||1;
var dotY=obj.dotY||1;
var ease=obj.ease||"weizhi";
for (var i = 0; i < len; i++) {
var h=particles[i];//获取当前像素点
if (h.count++ > h.delay) {
ctx.fillStyle = h.fillStyle;
var k = h.currTime;
var b = h.duration;
var c = h.interval;
if (particles[len - 1].duration + particles[len - 1].interval < particles[len- 1].currTime) {
for (var i = 0; i < len; i++) {
h=particles[i];
ctx.fillStyle = h.fillStyle;
ctx.fillRect(h.x, h.y, dotX, dotY);
};
clearInterval(timer);
return
} else {
if (k < b + c) {
if (k >= c) {
cur_x = window[ease]((k - c) , h.x0, (h.x - h.x0) , b);
cur_y = window[ease]((k - c) , h.y0, (h.y - h.y0) , b);
ctx.fillRect(cur_x, cur_y, dotX, dotY);
}
} else {
ctx.fillRect(h.x, h.y, dotX, dotY);
}
}
h.currTime += Math.random() + 0.5;
}
}
}
7.完成。
最后
写了个插件,http://download.csdn.net/detail/wwww_net/9654237
/**
*其中不同图片的粒子筛选条件请到js源文件中修改。
*/
var a=new Particles({
canvasId:'mycanvas',//必须,canvas的ID
imgUrl:'img/isux.png',//必须,image的路径
cols:100,//非必须,粒子列数,默认100
rows:100,//非必须,粒子行数,默认100
startX:400,//非必须,运动起点的X坐标,默认canvas中间
startY:300,//非必须,运动起点的Y坐标
imgX:0,//非必须,绘制图片的起点坐标,默认0
imgY:0,
duration:2000,//非必须
interval:6,//非必须
ease:"weizhi"//非必须,粒子运动函数,有多种,请到js源文件中直接复制函数名
});