canvas 实现简单的粒子运动效果

实现效果如下：

设计思路

1.初始化画布

2.再自定义创建80个圆点(数量可自定义)，然后初始化

3.然后实现是在一定距离范围内的圆点两两相连，并且运动起来

4.然后实现鼠标移进出现圆点与里面的圆点能相连

设计方法

1.初始化画布

// 初始化画布
        let ele = document.getElementById('my_canvas');
        ele.width = ele.offsetWidth;
        ele.height = ele.offsetHeight;
        let ctx = ele.getContext('2d');

2.创建圆与连线（使用构造函数，封装所有的方法与属性）

function random(min,max){
            return min+Math.random()*(max-min);
        }

// 创建圆(构造器函数)
        function circle(x,y){
            this.x=x;
            this.y=y;
            this.radius=random(.8,4);
            // 偏移
            this.speed_x=random(-1,1);
            this.speed_y=random(-1,1);

            // 移动
            this.move=function (width,height){
                this.speed_x=(this.x<width && this.x>0)?this.speed_x:(-this.speed_x);
                this.speed_y=(this.y<width && this.y>0)?this.speed_y:(-this.speed_y);
                this.x+=this.speed_x;
                this.y+=this.speed_y;
            }

            // 画圆
            this.drawCircle=function (ctx){
                ctx.beginPath();
                ctx.fillStyle=`rgba(${random(0,255)},${random(0,255)},${random(0,255)},.6)`  
                ctx.arc(this.x,this.y,this.radius,0,360);
                ctx.fill(); 
            }

            // 画连线
            this.drawLine=function(ctx,_circle){
                let dx=this.x-_circle.x;
                let dy=this.y-_circle.y;
                let d=Math.sqrt( Math.pow(dx,2) + Math.pow(dy,2) );
                // 勾股定理求距离
                if(d<120){
                    ctx.beginPath();
                    ctx.moveTo(this.x,this.y);
                    ctx.lineTo(_circle.x,_circle.y);
                    ctx.strokeStyle='rgba(201, 201, 201, 0.5)';
                    ctx.stroke();
                }             
            }
        }

3. 创建80个点，将其初始化，放进数组存储，以便移动是可以利用（初始化之后，要调用draw方法绘制画面）

// 创建圆点集合数组
        let circles=[];
        let circleCount=80;
// 初始化circleCount个圆
        function init(){
            for(let i=0;i<circleCount;i++){
                circles.push(new circle(random(0,ele.width),random(0,ele.height)));
            }
            draw();
        }
        init();

4.在画布上绘制出下面静态的画面

代码如下

 // 通过调用draw()方法，实现每一次80个点的位置的变化（看似实在运动）
        function draw(){
            // 清空上一次的画布
            ctx.clearRect(0,0,ele.width,ele.height);
        
            for(let i=0;i<circles.length;i++){
                circles[i].move(ele.width,ele.height);
                circles[i].drawCircle(ctx);
                for(let j=i+1;j<circles.length;j++){
                    circles[i].drawLine(ctx,circles[j]);
                }
            }

        }

5.实现圆点的自由运动

上面的代码，是静态的画面（默认draw方法只执行一次），所以只能我们通过手动点击刷新来改变位置

若想自动更新，可以通过计时器主要是采用requestAnimationFrame来代替setInterval

下面的这段代码（适用于不同浏览器，解决了一些浏览器没有requestAnimationFrame这个方法）

 window.requestAnimationFrame = window.requestAnimationFrame 
                                        || window.mozRequestAnimationFrame 
                                        || window.webkitRequestAnimationFrame 
                                        || window.msRequestAnimationFrame
                                        || function(callback){
                                            setInterval(callback,16.7)
                                            };

从上面的代码，我们可以引申出一个名词，叫做垫片（polyfill）->适配不同的浏览器缺少某个方法的一段算法 这段代码的作用就是解决一些浏览器没有requestAnimationFrame这个方法,

像这样的一段算法，或者说代码，是有名词来称呼它的叫做 垫片(polyfill)

该如何使用这个requestAnimationFrame呢？？（注：红字为使用方法）

 function draw(){
            ctx.clearRect(0,0,ele.width,ele.height);
        
            for(let i=0;i<circles.length;i++){
                circles[i].move(ele.width,ele.height);
                circles[i].drawCircle(ctx);
                for(let j=i+1;j<circles.length;j++){
                    circles[i].drawLine(ctx,circles[j]);
                }
            }
           
            requestAnimationFrame(draw);
        }

6. 实现上面例子中用鼠标移进的效果

　构造出鼠标实时位置画圆点的函数

 
function currentCircle(x,y){
           circle.call(this,x,y)
           this.drawCircle=function (ctx){
               ctx.beginPath();
               ctx.arc(this.x,this.y,this.radius,0,360);
               ctx.fillStyle='rgba(255,255,255,0)';
               ctx.fill();
           }
        }

　　注： 其中的circle.call(this,x,y)的代码call的第一个参数中是this，由于我们使用let currentPoint=new currentCircle(0,0)

      所以this绑定在currentPoint这个对象身上，假设没有new这个关键字，那么1这个this指向的就是window（在非严格模式下）。

   call 是能够改变this指向，表示了this的值从一个环境传到另一个环境。而将一个对象作为call的第一个参数，则this将绑定这个对象，也就是currentCircle；其他参数为传参。

   因此，我们可以理解成把circle函数的所有方法和属性，用到的this都是 currentCircle的方法和属性。

例子

　　　　　　var a=7;
	  var obj={
		  a:4
	  }
	  function test(){
		  return this.a;
	  }
	  test() // 结果 7
	  test.call(obj) // 结果4 

获取鼠标实时的位置

代码如下：

// 初始化鼠标的位置 （这个是对象）
let currentPoint=new currentCircle(0,0);

// 鼠标移进
 window.onmousemove= function (event){
      let e = event|| window.event;
      let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
 // 鼠标的坐标（实时改变）
      currentPoint.x = e.pageX || e.clientX + scrollX;
      currentPoint.y= e.pageY || e.clientY + scrollY;  
   }
   // 鼠标移出
  window.onmouseout = function() {
     currentPoint.x = null;
     currentPoint.y = null;
   }

draw绘制出鼠标的效果

function draw(){
            // 清空上一次的画布
            ctx.clearRect(0,0,ele.width,ele.height);
        
            for(let i=0;i<circles.length;i++){
                circles[i].move(ele.width,ele.height);
                circles[i].drawCircle(ctx);
                for(let j=i+1;j<circles.length;j++){
                    circles[i].drawLine(ctx,circles[j]);
                }
            }

          // 表示如果鼠标的位置不为null，就会执行下面的操作
            if(currentPoint.x){
                currentPoint.drawCircle(ctx);
                for(let k=0;k<circles.length;k++){
                    currentPoint.drawLine(ctx,circles[k]);
                }
            }
            requestAnimationFrame(draw);
        }

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas 粒子特效</title>
    
</head>
<body >
    <style>
        body {
            margin: 0;
            height: 100%;
        }

        canvas {
             100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0;
        }
    </style>
    <canvas id="my_canvas" width="400" height="400"></canvas>
    <script>
        // 初始化画布
        let ele = document.getElementById('my_canvas');
        ele.width = ele.offsetWidth;
        ele.height = ele.offsetHeight;
        let ctx = ele.getContext('2d');
        
        // 创建圆点集合数组
        let circles=[];
        let circleCount=80;
        let currentPoint=new currentCircle(0,0);
        // 初始化circleCount个圆
        function init(){
            for(let i=0;i<circleCount;i++){
                circles.push(new circle(random(0,ele.width),random(0,ele.height)));
            }
            draw();
        }
        init();

        
        window.requestAnimationFrame = window.requestAnimationFrame 
                                        || window.mozRequestAnimationFrame 
                                        || window.webkitRequestAnimationFrame 
                                        || window.msRequestAnimationFrame
                                        || function(callback){
                                            setInterval(callback,16.7)
                                            };

        function random(min,max){
            return min+Math.random()*(max-min);
        }
        
        
        // 通过调用draw()方法，实现每一次80个点的位置的变化（看似实在运动）
        function draw(){
            // 清空上一次的画布
            ctx.clearRect(0,0,ele.width,ele.height);
        
            for(let i=0;i<circles.length;i++){
                circles[i].move(ele.width,ele.height);
                circles[i].drawCircle(ctx);
                for(let j=i+1;j<circles.length;j++){
                    circles[i].drawLine(ctx,circles[j]);
                }
            }
            if(currentPoint.x){
                currentPoint.drawCircle(ctx);
                for(let k=0;k<circles.length;k++){
                    currentPoint.drawLine(ctx,circles[k]);
                }
            }
            requestAnimationFrame(draw);
        }
        // 鼠标移进
         window.onmousemove= function (event){
            let e = event|| window.event;
            let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            currentPoint.x = e.pageX || e.clientX + scrollX;
            currentPoint.y= e.pageY || e.clientY + scrollY;  
        }
        // 鼠标移出
        window.onmouseout = function() {
            currentPoint.x = null;
            currentPoint.y = null;
        }
            
         
        function currentCircle(x,y){
           circle.call(this,x,y)
           this.drawCircle=function (ctx){
               ctx.beginPath();
               ctx.arc(this.x,this.y,this.radius,0,360);
               ctx.fillStyle='rgba(255,255,255,0)';
               ctx.fill();
           }
        }

        // 创建圆(构造器函数)
        function circle(x,y){
            this.x=x;
            this.y=y;
            this.radius=random(.8,4);
            // 偏移
            this.speed_x=random(-1,1);
            this.speed_y=random(-1,1);

            // 移动
            this.move=function (width,height){
                this.speed_x=(this.x<width && this.x>0)?this.speed_x:(-this.speed_x);
                this.speed_y=(this.y<width && this.y>0)?this.speed_y:(-this.speed_y);
                this.x+=this.speed_x;
                this.y+=this.speed_y;
            }

            // 画圆
            this.drawCircle=function (ctx){
                ctx.beginPath();
                ctx.fillStyle=`rgba(${random(0,255)},${random(0,255)},${random(0,255)},.6)`  
                ctx.arc(this.x,this.y,this.radius,0,360);
                ctx.fill(); 
            }

            // 画连线
            this.drawLine=function(ctx,_circle){
                let dx=this.x-_circle.x;
                let dy=this.y-_circle.y;
                let d=Math.sqrt( Math.pow(dx,2) + Math.pow(dy,2) );
                // 勾股定理求距离
                if(d<120){
                    ctx.beginPath();
                    ctx.moveTo(this.x,this.y);
                    ctx.lineTo(_circle.x,_circle.y);
                    ctx.strokeStyle='rgba(201, 201, 201, 0.5)';
                    ctx.stroke();
                }             
            }
        }        
</script>
</body>
</html>