手写canvas 粒子连线特效

test3.gif
粒子连线特效.gif
这种特效一般比较常见不过一般很多程序员都是用的已经写好的现成的插件
如果要自己写要怎么实现呢~
其实是这样的
<!DOCTYPE html>
<html>
<head>
    <title>背景滚动</title>
   <meta charset="utf-8">
        <style>
           *{
              padding: 0;
              margin: 0;
           } 
           html{
             width: 100%;
             height: 100%;

           }
           body {
                background: #dddddd;
                height: 100%;
            }

            #canvas {
            position: absolute;
            top: 0;
            left: 0;
    
            background: #ffffff;


            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }

         input {
            margin-left: 15px;
            }

        </style>

</head>
<body>
    <canvas id='canvas'>
      Canvas not supported
    </canvas>

    <input id='animateButton' type='button' value='Animate'/>

    <script src='./requestNextAnimationFrame.js'></script>
   
</body>
</html>


<script type="text/javascript">
var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")
var strokeStyle="rgb(100,100,195)"
var fillStyle="#fff"
var background_color="rgba(0,0,0,0)"
var num=150
var width_=document.body.clientWidth;
var height_=document.body.clientHeight


canvas.width=width_
canvas.height=height_






var Sprite=function(name,painter,behaviors){
  if(name!==undefined){this.name=name}
    if(painter!==undefined){this.painter=painter}
      this.top=0
      this.left=0
      this.width=0
      this.height=0
      this.velocityX=0
      this.velocityY=0
      this.visible=true
      this.animating=false
      this.behaviors=behaviors||[]
      this.RADIUS=0
      return this


}
Sprite.prototype={
   paint:function(context){
    if(this.painter!==undefined&&this.visible){this.painter.paint(this,context)}
   },
   update:function(context,time){
    for(var i=0;i<this.behaviors.length;i++){
      this.behaviors[i].excute(this,context,time)
    }
   }
}
function drawLine(ctx,startPoint,endPoint){
    ctx.strokeStyle = '#ccc';
     ctx.beginPath();

    ctx.moveTo(startPoint.left,startPoint.top);
    ctx.lineTo(endPoint.left,endPoint.top);
     ctx.closePath();
     ctx.stroke();


}
// var RADIUS=5
var pai={
        paint:function(sprite,context){

             context.save()

             context.beginPath()
 
             sprite.velocityX=sprite.velocityX+(Math.random()-Math.random())*0.03  //速度
             sprite.velocityY=sprite.velocityY+(Math.random()-Math.random())*0.03  //速度

              


            if(Math.abs(sprite.velocityX)>0.3){  //限速
               sprite.velocityX=0.01
            }
            if(Math.abs(sprite.velocityY)>0.3){  //限速
               sprite.velocityY=0.01
            }
        


             sprite.left=sprite.left+sprite.velocityX
             sprite.top=sprite.top+sprite.velocityY

             if(sprite.left+sprite.RADIUS>canvas.width||sprite.left-sprite.RADIUS<0){  //碰撞检测
                sprite.velocityX=-sprite.velocityX
             }
             if(sprite.top+sprite.RADIUS>canvas.height||sprite.top-sprite.RADIUS<0){
                sprite.velocityY=-sprite.velocityY
             }


             
             context.arc(sprite.left+sprite.width/2,sprite.top+sprite.height/2,sprite.RADIUS,0,Math.PI*2,false)
             context.clip()

             context.shadowBlur=8
             context.lineWidth=2
             context.strokeStyle="rgb(100,100,195)"
             context.fillStyle="#fff"
             context.fill()
             context.stroke()
             context.restore()


        }

}
var star_list=[]
for(var i=0;i<num;i++){
  var star=new Sprite("star"+i,pai)
   star.left=parseInt(19+(Math.random()*width_))
   star.top=parseInt(19+(Math.random()*height_))

    star.velocityY=0
    star.velocityX=0

  star.RADIUS=parseInt(2)  //球的半径
  star_list.push(star)
}
function animate(){
       context.clearRect(0,0,canvas.width,canvas.height)
       context.fillStyle=background_color
       context.fillRect(0,0,canvas.width,canvas.height)
       
       for(var i=0;i<star_list.length;i++){

           star_list[i].paint(context,i)
           if(i<(star_list.length-1)){
            var now_left=star_list[i].left;
            var now_top=star_list[i].top;

            for(var j=i+1;j<star_list.length;j++){
                 if(Math.abs(star_list[j].left-star_list[i].left)<80&&Math.abs(star_list[j].top-star_list[i].top)<80){
                  drawLine(context,star_list[i],star_list[j])

                 }
                

            }

           }
          

       }

          window.requestAnimationFrame(animate)

      
}

window.requestAnimationFrame(animate)


</script>
最后编辑于：2019.12.30 18:02:53