H5---喷泉

来源：互联网发布：yyf的淘宝店叫什么编辑：程序博客网时间：2024/04/28 13:17
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            html,body{                margin: 0;                padding: 0;                overflow: hidden;            }            a{                cursor: no-drop;            }        </style>    </head>    <body>        <!--canvas自带的属性，这不是css-->        <!--<canvas width="200px" height="200px"></canvas>-->    </body>    <script type="text/javascript">        var arr=[];        //创建一个画布        var canvas=document.createElement('canvas');  //document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。        //把创建的画布加到body中        document.body.appendChild(canvas);        //window.innerWidth Height  窗口的宽高        canvas.width=window.innerWidth;        canvas.height=window.innerHeight;        canvas.style.background="black";        canvas.style.cursor="none"; //光标设置        //申请一个2d的画笔        var paint=canvas.getContext('2d');//      paint.fillStyle='white';        setInterval(drawCircles,20);  //20毫秒调用一次,相当于计时器        function drawCircles(){            //清除原来的笔迹            paint.clearRect(0,0,window.innerWidth,window.innerHeight);            var x=window.innerWidth/2;            var y=window.innerHeight/2;            //每次新建一个圆//          var c=new Circle(x,y); //初始圆心坐标为页面中心（会随着屏幕大小而改变）            var c=new Circle(xx,yy);  //初始圆心坐标为鼠标在页面上的位置            //把原来的加到数组            arr.push(c);            //把数组遍历一次            for(var i=0;i<arr.length;i++){                //更新所在的位置                arr[i].update();            }        }        function Circle(xPos, yPos){            this.x=xPos;  //this.x  this.y 圆心的位置            this.y=yPos;            this.yVal=5;   //圆心在y轴每次运动的速度            //Math.random() 随机生成一个0~1的随机小数，不包括1, Math.random()*4 即为0~4的数， 然后再-2就会成为-2~2，此时喷出的粒子就会左右对称分开            this.xVal=Math.random()*4-2;  //在x轴的变化量是随机生成的，所以每一个都不一样            this.update=function(){                //Math.random()随机一个小数，  Math.floor向下取整  .toString(16)转成16进制的值                var num=Math.floor(Math.random()*16*16*16*16*16*16).toString(16);                paint.fillStyle='#'+num;                this.x += this.xVal;  //this.x=this.x+this.xVal                this.yVal -= 0.07;    //一开始为正，后来慢慢变成负的 变为负数是就会下降                if(this.y>window.innerHeight){                    this.yVal=5;  //反弹                }                this.y -= this.yVal;                paint.beginPath();                paint.arc(this.x,this.y,3,0,Math.PI*2,true);  //this.x,this.y圆心位置，3为半径，0为画圆的初始角度，Math.PI*2为画圆的角度360°，true和false分别为顺时针和逆时针画圆                paint.closePath();                paint.fill();            }        }        var xx=10;        var yy=10;        canvas.onmousemove=function(ev){//让喷泉喷出点可以随着鼠标移动            xx=ev.clientX;            yy=ev.clientY;        }    </script></html>
这里写图片描述
0 0