关于用canvas书写粒子效果的多种方法

废话不多说，直接奔入主题，这里先给出三种方法；

第一种：流氓写法。

为什么叫流氓写法呢？因为用的压根就不是canvas写的。

直接一张gif图，平铺在页面底层就哦了，是不是够流氓。直接上图，不废话。

一张放大很难看，就多张平铺，定好位就行了。

这是链接：https://chuyunshi.github.io/Example/chuyunshi-canvas/canvasLizi/gif.html

-------------------------------------------------------------------------------------------------------------------------

重点讲后两种方法：

第二种：基于jquery(或zepto)的.....(取不出来好名字)；

代码来啦！！！

html:

<div class="page re" >
    <canvas id="canVas"   class="page ab"></canvas>
</div>

re：position: relative;

ab:position: absolute;

page:自己在js里面找找看，找不着也没事，我又不会怪你的。

-------------------------------------------------------------------------------------------------------------------------

js:

首先，先引入jquery.js 或者 zepto.js ，然后引入自己写的插件，暂命名为lizi.js,左后引入我们的main.js来执行。

jquery.js：

这里就不贴了，不然会被打死的。

lizi.js:

(function(a){
    a.fn.lizi=function(p){
        var p=p||{};

        var w_w=p&&p.window_width?p.window_width:"500";
        var w_h=p&&p.window_height?p.window_height:"400";
        var w_b=p&&p.window_background?p.window_background:"#000";
        var s_c=p&&p.star_count?p.star_count:"600";
        var s_color=p&&p.star_color?p.star_color:"#FFF";
        var s_d=p&&p.star_depth?p.star_depth:"250";
        var dom=a(this);
        var fov = parseInt(s_d);
        var SCREEN_WIDTH = parseInt(w_w);
        var SCREEN_HEIGHT = parseInt(w_h);
        var HALF_WIDTH = SCREEN_WIDTH/2;
        var HALF_HEIGHT = SCREEN_HEIGHT/2;
        var c_id = dom.attr("id");
        var numPoints = s_c;
        dom.attr({ width: w_w, height: w_h});
        setup();
        function setup()
        {
            function draw3Din2D(point3d)
            {
                x3d = point3d[0];
                y3d = point3d[1];
                z3d = point3d[2];
                var scale = fov/(fov+z3d);
                var x2d = (x3d * scale) + HALF_WIDTH;
                var y2d = (y3d * scale)  + HALF_HEIGHT;

                if(scale>3){
                    scale=3
                }
                c.lineWidth= scale;
                c.strokeStyle = s_color;
                c.beginPath();
                c.moveTo(x2d,y2d);
                c.lineTo(x2d+scale,y2d);
                c.stroke();

            }
            var canvas = document.getElementById(c_id);
            var c = canvas.getContext('2d');

            var points = [];

            function initPoints()
            {
                for (i=0; i<numPoints; i++)
                {
                    point = [(Math.random()*600)-300, (Math.random()*600)-300 , (Math.random()*600)-300 ];
                    points.push(point);
                }
            }

            function render()
            {
                c.fillStyle=w_b;
                c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);

                for (i=0; i<numPoints; i++)
                {
                    point3d = points[i];

                    z3d = point3d[2];
                    z3d-=4;
                    if(z3d<-fov) z3d +=600;
                    point3d[2] = z3d;
                    draw3Din2D(point3d);
                }
            }

            function render2()
            {

                c.fillStyle=w_b;
                c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);

                for (i=0; i<numPoints; i++)
                {
                    point3d = points[i];

                    z3d = point3d[2];
                    z3d+=4;
                    if(z3d>fov) z3d -=600;
                    point3d[2] = z3d;
                    draw3Din2D(point3d);

                }

            }
            initPoints();

           var loop = setInterval(function(){
                render();
            }, 50);
            var clickNum = true;
            $("body").on("click",function(){
                if(clickNum){
                    clearInterval(loop);
                     loop2 = setInterval(function(){
                        render2();
                    },50);
                }else{
                    clearInterval(loop2);
                    loop = setInterval(function(){
                        render();
                    }, 50);
                }
                clickNum = !clickNum;
            })
        }
    }
})(jQuery);//要是引用的是zepto.js 。把这该成Zepto("Z"要大写);

这里我多写了个点击事件,点击后，粒子逆向跑，不需要的到时候在lizi.js里面删除即可。

然后是main.js ：

/**
 * Created by chuyunshi on 2017/5/25.
 */
$(document).ready(function(){
    var pageH,pageW;
    page= {
        init: function () {
            ////阻止body滑动
            $('body').on("touchmove", function (e) {
                e.preventDefault();
            });
            window.addEventListener("touchstart", function (e) {
                //e.preventDefault();
            });

            $(window).resize(function () {
                page.resize();
            });

            page.resize();
            page.canVas.init();

        },
        canVas:{
            init:function(){
              page.canVas._canvas();
            },
            //重点在这里！！！
            //调用插件
            _canvas:function(){
                $("#canVas").lizi({
                    window_width: pageW,//页面宽
                    window_height: pageH,//页面高
                    window_background: '#00113F',//背景色
                    star_count: '1000',//粒子数目
                    star_color: '#FBFFAF',//粒子颜色
                    star_depth: '300'//这个值，你猜是干嘛的，随便调调你就知道了。
                });
            }

        },

        resize: function () {
            pageH = $(window).height();
            pageW = $(window).width();
            $(".page").width(pageW).height(pageH);
            $('canvas').attr('width', pageW).attr('height', pageH)
        }
    };
    page.init();
});

第二种写法完毕。

这是链接：https://chuyunshi.github.io/Example/chuyunshi-canvas/canvasLizi/index.html

-------------------------------------------------------------------------------------------------------------------------------------------

第三种方法：基于easel.js的.....（名字不好起啊）

这里我就不一点一点的贴代码的，先说几个重点的，其他的代码里都有注释。

用的是easel.js这个插件，但是我引用的是create.js，因为create.js有四个儿子（解释完毕！）这是链接，自己去瞅瞅→→→ http://www.createjs.cc/

完整代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/main.css"/>
</head>
<body class="hidden">

<canvas id="canvas"></canvas>

<script src="../js/zepto.min.1.js"></script>
<script src="../js/createjs-2015.11.26.min.js"></script>
<script>
    $(document).ready(function(){
        var pageH,pageW;
        page= {
            init: function () {
                ////阻止body滑动
                $('body').on("touchmove", function (e) {
                    e.preventDefault();
                });
                window.addEventListener("touchstart", function (e) {
                    e.preventDefault();
                });
                $(window).resize(function () {
                    page.resize();
                });
                page.click=0;
                //用来存储圆点
                page.circleArray=[];
                //设置圆点数量
                page.circleLength = 300;
                page.resize();
                page.canVas.init();
            },
            canVas:{
                init:function(){
                    page.canVas._canvas()
                },
                _canvas:function(){
                    stage = new createjs.Stage("canvas");
                    //循环定义圆点的属性；
                    for(var i= 0;i< page.circleLength;i++){
                        //随机圆点颜色
                        var color = "rgba(" + Math.floor(Math.random()*255) + "," + Math.floor(Math.random()*255) + ","+ Math.floor(Math.random()*255) +","+Math.random()+")";
                        //随机半径
                        var radius = Math.random()+1.5;
                        //随机初始位置
                        var x = Math.random()*pageW;
                        var y = Math.random()*pageH;
                        //随机每个点的“移动速度跟方向”
                        var movex = (1-Math.random()*2)*0.5
                        var movey = (1-Math.random()*2)*0.5
                        //画点
                        var particle = page.canVas._drawCircle(color, radius,x,y,movex,movey);
                        //将点存入数组，用于后面调用
                        page.circleArray.push(particle);
                        //添加形状实例到舞台显示列表
                        stage.addChild(particle);
                    }
                    //帧率
                    createjs.Ticker.setFPS(60);
                    //更新阶段将呈现下一帧
                    createjs.Ticker.addEventListener("tick", page.canVas.tick);

                },
                //圆点函数
                _drawCircle:function(color, radius,x,y,movex,movey){
                    var particle = new createjs.Shape();
                    particle.graphics.beginFill(color).drawCircle(0, 0, radius);
                    particle.x = x;
                    particle.y = y;
                    particle.movex = movex;
                    particle.movey = movey;
                    return particle;

                },
                //圆点移动
                tick:function(){
                    if(page.click==0){//page.click==1;粒子快速消失
                        for(var i= 0;i< page.circleLength;i++){
                            //x轴方向，不同方向，不同速度移动
                            page.circleArray[i].x+=page.circleArray[i].movex;
                            //超出屏幕，从另一边出来，循环
                            if(page.circleArray[i].x>=pageW){
                                page.circleArray[i].x=0
                            }else if(page.circleArray[i].x<=0){
                                page.circleArray[i].x=pageW
                            }
                            //Y轴方向，不同方向，不同速度移动
                            page.circleArray[i].y+=page.circleArray[i].movey;
                            if(page.circleArray[i].y>=pageH){
                                page.circleArray[i].y=0
                            }else if(page.circleArray[i].y<=0){
                                page.circleArray[i].y=pageH
                            }
                        }
                    }else{
                        for(var i= 0;i< page.circleLength;i++){
                            //x轴方向，不同方向，不同速度移动
                            page.circleArray[i].x+=page.circleArray[i].movex*30;

                            //Y轴方向，不同方向，不同速度移动
                            page.circleArray[i].y+=page.circleArray[i].movey*30;
                        }
                    }

                    //刷新
                    stage.update();
                }

            },
            resize: function () {
                pageH = $(window).height();
                pageW = $(window).width();
                $(".page").width(pageW).height(pageH);
                $('canvas').attr('width', pageW).attr('height', pageH)
            }
        };
        page.init();
    });
</script>
</body>
</html>

 

这是链接：https://chuyunshi.github.io/Example/chuyunshi-canvas/demo/demo2.html

main.css里只有一句：

#canvas{
    background: #000;
}

设置背景是黑的。

先到这，我还得去整点其他的特效。