canvas实现雨滴动画

最新推荐文章于 2023-03-29 14:15:59 发布

啥时候能干全栈

最新推荐文章于 2023-03-29 14:15:59 发布

阅读量399

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_42177478/article/details/104972503

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述


<!doctype html><!--声明文档类型：html-->
<html lang="en">
    <head><!--头部-->
        <meta charset="UTF-8"><!--字符编码:utf-8国际编码-->
        <meta name="Keywords"content="关键词1,关键词2"><!--关键词-->
        <meta name="Description"content="描述"><!--描述-->
        <title>流星雨</title><!--网页标题-->
        <style>
            *{
                margin:0;
                padding:0;
            }
            #canvas{
                background:#000;
                display:block;
            }
        </style>
    </head>
    <body><!--身体-->
        <canvas id="canvas">您的浏览器不支持cnavas绘图，请您更换浏览器!!</canvas>
        <script>
            var can = document.getElementById("canvas");
            var ctx = can.getContext("2d");//设置绘图环境
            var w = can.width =window.innerWidth;//把窗口的宽度赋值给画布
            var h = can.height =window.innerHeight;//把窗口的高度赋值给画布
            var count = 30;//雨滴的个数
            var drops = [];//定义一个空数组来保存雨滴个数
            //浏览器窗口改变的时候重新获取宽度
            window.onresize =function(){
                w = can.width = window.innerWidth;
                h = can.height = window.innerHeight;
            }
            function Drop(){}//定义雨滴对象
            //添加原型对象方法
            Drop.prototype = {
                init : function(){//初始化
                    this.x =random(0,w);
                    this.y =0;
                    this.r =1;//初始半径
                    this.vy =random(4,5);//竖直方向的加速度  //从4~5之间的随机数
                    this.vr =1;//半径的加速度
                    this.a =1;//初始透明度
                    this.va =0.96;//透明度的变化系数
                    this.l =random(h*0.8,h*0.9);//雨滴下落的高度
                },
                draw : function(){//绘制
                    if (this.y >this.l)
                    {
                        ctx.beginPath();//一个画布中开始子路径的一个新的集合。丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
                        ctx.arc(this.x,this.y,this.r,0,2*Math.PI,false);//创建一个圆形  this.x圆的中心的 x 坐标。  this.y圆的中心的 y 坐标。   this.r圆的半径。  0 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。  2*Math.PI结束角，以弧度计。 false可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
                        ctx.strokeStyle ="rgba(0,255,255,"+this.a+")";//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。
                        ctx.stroke();//绘制出来路径
                    }else{
                        console.log(this.a)
                        ctx.fillStyle =color(this.a);//透明度
                        // console.log(ctx.fillStyle);
                        ctx.fillRect(this.x,this.y,2,10);//绘制"已填充"的矩形。默认的填充颜色是黑色。
                    }
                    this.update();
                },
                //更新坐标
                update : function(){ 
                    if (this.y <this.l)
                    {
                        this.y +=this.vy;
                    }else{
                        if (this.a >0.03)
                        {
                            this.r +=this.vr;
                            if (this.r >50)
                            {
                                this.a *=this.va;
                            }
                        }else{
                            this.init();
                        }
                    }
                }
            }
            //不断的更新雨滴位置
            function move(){
                ctx.fillStyle ="rgba(0,0,0,.1)";
                ctx.fillRect(0,0,w,h);//这个在先绘制
                for (var i=0;i<drops.length;i++ )
                {
                    drops[i].draw();
                }
                //调用经动画
                requestAnimationFrame(move);
            }
            //创建一个雨滴实例对象
            //var drop = new Drop();
            //drop.init();
            //drop.draw();
            //延迟产生每个雨滴
            function setup(){
                for (var i=0;i <count ;i++ )
                {
                    (function(j){
                        setTimeout(function(){
                            var drop = new Drop();
                            drop.init();
                            drops.push(drop);
                        },j*200);
                    }(i))
                }
            }
            setup();
            move();
            //封装一个产生随机数的方法
            function random(min,max){
                return Math.random()*(max-min) +min;
            }
            //封装一个随机颜色
            function color(a){
                //rgba
                var r = Math.floor(Math.random()*255);
                var g = Math.floor(Math.random()*255);
                var b = Math.floor(Math.random()*255);
                return "rgba("+r+","+g+","+b+","+a+")"
            }
        </script>
    </body>
<html>

啥时候能干全栈

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
canvas实现雨滴动画

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords"c...
复制链接

扫一扫