js用canvans 实现简单的粒子运动

Posted 2021-02-10 dainney

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js用canvans 实现简单的粒子运动相关的知识，希望对你有一定的参考价值。

 <html>
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	   #canvas{
	   background:#000;
	   }
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	
</body>
</html>
<script>
    var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext(‘2d‘);
        var WHeight=document.body.offsetHeight;
        var WWidth=document.body.offsetWidth ;
        canvas.width=WWidth;
        canvas.height=WHeight;
        var Number=1200;  //控制粒子的个数
        var Data=[];
        Dataarc() //多个圆
        function  Dataarc()
        { 
         for(var i=0;i<Number;i++)
           {
               Data[i]={
                   x:~~(Math.random()*WWidth),
                   y:~~(Math.random()*WHeight),
                   px:Math.random()*2,
                   py: Math.random()*2
               }
               console.log(Data);  
             arc(Data[i].x, Data[i].y);
           }
        }
        function  arc(x,y)   //画圆
        {  
          ctx.save();  
          ctx.beginPath(); 
          ctx.fillStyle="#fff";//填充颜色,默认是黑色
          ctx.arc(x,y,2,0,2*Math.PI,false);
          ctx.fill();
          ctx.stroke(); 
        }
        function line(x1,y1,x2,y2)  //连线的线段
        {  
           ctx.save();   
           var linear=ctx.createLinearGradient(x1,y1,x2,y2);
           linear.addColorStop( 0, ‘red‘ );
           linear.addColorStop( 1, ‘blue‘ );
           ctx.lineWidth=1.5;   
           ctx.strokeStyle = linear;
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.closePath(); 
            ctx.lineTo(x2, y2); 
            ctx.stroke(); 
           ctx.restore();
        }
        function Motion()  //控制粒子的运动和判断连线条件
        { 
         ctx.clearRect(0,0,WWidth,WHeight); 
         if(Data!="")
          {  
            for(var i=0;i<Number;i++)
            {   
              if(Data[i].x<=0 ||Data[i].x>=WWidth)
              { 
                 Data[i].px=-Data[i].px;
              
              }
              if( Data[i].y>=WHeight||Data[i].y<=0)
              { 
                 Data[i].py=-Data[i].py;
              }
                Data[i].x=~~(Data[i].x)-~~(Data[i].px); 
                    Data[i].y=~~(Data[i].y)+~~(Data[i].py);   
                            arc(Data[i].x, Data[i].y);
                for(var j=i+1;j<Number;j++)
                {
                  if(Math.pow(Data[i].x- 
                                  Data[j].x,2)+Math.pow(Data[i].y-Data[j].y,2<2000)
                  {
                        line(Data[i].x,Data[i].y,Data[j].x,Data[j].y);
                  }
                }
            }
           }
        }
        setInterval("Motion()","200");   //定时调用，让粒子运动
    </script>

　　　　在写下合格粒子运动时要先清楚你的思路，不能一开始就盲目的开始写，首先先要确定思路然后在去一步步的实现，在写的过程要注意细节，要思考js有些知识是跟数学知识相关的要注意观察

1要创建一个画布

2要创建粒子

3让粒子能够运动起来

粒子运动不是粒子真正的在动，而是不断的重画

3判断粒子勾成连线的条件(用勾股定理)

以上是关于js用canvans 实现简单的粒子运动的主要内容，如果未能解决你的问题，请参考以下文章

OpenHarmony - 基于ArkUI(JS)实现移动粒子效果背景