实现粒子喷射效果

来源：互联网发布：淘宝一个月挣10万编辑：程序博客网时间：2024/04/30 11:00

主要思路：粒子从中心点产生，它么都是先向上，而它们都有一个重力因数运动一会就会向下并且是越来越快而x轴方向是它们

都会随机产生一个-2到2的数

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <style>
   /*使所有元素的内外边距设置为0*/
       *{
           margin: 0;
           padding: 0;
       }

   </style>
   <body>
       <script>
           //创建canvas元素
           var canvas = document.createElement("canvas");
           //设置大小和分辨率window.innerWidth是获取其浏览器的宽度
           canvas.width=window.innerWidth;
           canvas.height = window.innerHeight;
           //设置背景色
           canvas.style.backgroundColor='black';
           //将canvas插入到body
           document.body.appendChild(canvas);
           //取出画笔画2d的图形
           var paint = canvas.getContext("2d");

           //创建数组
           var array = [];

           //开启定时器:第一个参数是执行方法第二个参数执行的间隔
           setInterval(function(){
               //清除画布开始的x,y轴的坐标清除的宽度和高度
               paint.clearRect(0,0,canvas.width,canvas.height);

               //随机产生坐标Math.random()0~1
//               var x = Math.random()*canvas.width;
                var x = 0.5*canvas.width;
//               var y = Math.random()*canvas.height;
                var y = 0.5*canvas.height;
                var par = new Partical(x,y);
                //存入数组里
                array.push(par);
                //绘制数组中的所有粒子
                var len = array.length;
                console.log(len);
                for(var i=0;i<len;i++){
                   var e = array[i];
                   e.drawSelf();
                   //更新坐标
                   e.updatePost();
                }
           },30);



           //定义粒子类
           function Partical(pointX,pointY){
               //定义属性
               this.x=pointX;
               this.y=pointY;
               //y方向的速度
               this.speedY = -4;
               //定义重力因素
               this.gravity = 0.05;
               this.speedX =Math.random()*4-2;//Math.random()产生的随机数是0到1

               //定义方法(绘制自身)
               this.drawSelf = function(){
                   //绘画实心的白色的圆
                   paint.beginPath();
                   paint.arc(this.x,this.y,5,0,Math.PI*2,false);
                   paint.closePath();

//填充小球的内部颜色

                    paint.fillStyle=getColor();
                   paint.fill();
               }

               //更新位置
               this.updatePost = function(){
                   //更新y坐标
                   this.y+=this.speedY;
                   this.x+=this.speedX;
                   //更新Y方向的速度
                   this.speedY+=this.gravity;
               }
           }

           //产生随机颜色
           function getColor(){
               //把生成的数转成16进制
               return "#"+Math.round(Math.random()*16777215).toString(16);
           }
       </script>
   </body>
</html>

0 0