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 dr.........完整代码请登录后点击上方下载按钮下载查看