手写canvas 粒子连线特效

作者: infi_ | 来源:发表于2019-12-30 17:50 被阅读0次

手写canvas 粒子连线特效
canvas 会动的粒子效果
html5各种特效
canvas实现粒子特效
canvas 文字粒子特效
canvas 实现动态粒子连线
canvas粒子效果
canvas实现背景动态粒子连线
canvas制作随机粒子移动特效
Unity中的粒子系统

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>