H5---喷泉

最新推荐文章于 2021-05-31 10:11:48 发布

晴风雪舞

最新推荐文章于 2021-05-31 10:11:48 发布

阅读量330

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/swiftwwj/article/details/54667722

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
H5---喷泉

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> html,body{ margin: 0; padding: 0;
复制链接

扫一扫