canvas粒子动画

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源文件中直接复制函数名
    });

学习自：https://isux.tencent.com/canvas-particle-animation.html