canvas下雨产生涟漪动画效果代码-html代码-BFW代码库

canvas下雨产生涟漪动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas下雨产生涟漪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <meta charset="utf-8">


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            background-color: rgba(255,255,255,0.5);
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas">你的浏览器不支持canvas</canvas>
    <script>
        var can = document.getElementById("canvas");
        //设置绘图环境
        var cxt = can.getContext("2d");
        //获取浏览器窗口的宽高
        var w = can.width = window.innerWidth;
        var h = can.height = window.innerHeight;
        //让画布的宽高跟随浏览器窗口的变化而变化
        window.onresize = function () {
            w = can.width = window.innerWidth;
            h = can.height = window.innerHeight;
        };
        //设置画笔颜色
        cxt.fillStyle = "aqua";
        //绘制矩形
        //cxt.fillRect(50,50,100,100);//绘制的坐标点：x y 宽 w 高 h
        //cxt.fill();填充方法(实心) cxt.stroke（）；触笔方法(空心)
        //cxt.rect(x,y,w,h); 规定矩形的路径
        //绘制圆 圆心坐标
        //cxt.arc(250,250,50,0,Math.PI*2,false);//圆心坐标：x y 半径 r
        // 从0度角绘制到360度(弧度值：Math.PI*角度/180)  逆时针
        //cxt.fill();
        //var x = 100,y = 0;
        //        setInterval(function(){
        //            y++;
        //            cxt.clearRect(0,0,w,h);//清除画布内容
        //            cxt.fillRect(x,y,2,35)
        //        },1000/60);
        /*     function move(){
            y++;
            cxt.clearRect(0,0,w,h);
            cxt.fillRect(x,y,2,35);
            requestAnimationFrame(move);//原生js的经动画
        }
        move();*/

        //面向对象
        var drops = [];
        // 创建雨滴对象
        function Drop() { }
        //添加对象方法
        Drop.prototype = {
            init: function () { //初始化方法 设置每个雨滴的初始化属性
                //设置坐标
                this.x = random(0, w);
                this.y = 0;
                //y方向的速度值
                this.vy = random(4, 5);
                //雨滴下落的最大高度
                this.l = random(0.8 * h, 0.9 * h);
                //波纹的初始半径
                this.r = 1;
                this.vr = 1; //半径增大的速度
                //判断雨滴消失的透明度
                this.a = 1; // =>0
                this.va = 0.96; //透明度的变化系数
            },
            draw: function () { //绘制图形
                if (this.y > this.l) { //雨滴下落到了指定位置 开始绘制圆形
                    cxt.beginPath(); //先开始路径
                    cxt.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
                 .........完整代码请登录后点击上方下载按钮下载查看