Canvas 雨滴特效

Posted wgchen~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Canvas 雨滴特效相关的知识,希望对你有一定的参考价值。

阅读目录

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>汇制雨滴</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            canvas{
                display: block;
                /*vertical-align: middle;*/
                background: #000;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas">您的浏览器不支持画布,请您更换浏览器</canvas>
    </body>
    <script type="text/javascript">
        var can = document.getElementById('canvas');
        //设置2d绘图
        var ctx = 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;
         }
          
         //canvas绘制矩形
         //设置矩形框的路径
            //ctx.rect(x,y,w,h); //xy 坐标  wh宽高
         //画出来
            //ctx.fill();  //填充方法
            //stx.stroke(); //触笔方法 空心的
//          ctx.fillStyle = 'red';
//          ctx.fillRect(100,100,100,100)
//          //绘制圆形
//          ctx.arc(250,250,50,0,Math.PI*2,false)
//          ctx.strokeStyle = 'red';
//          ctx.stroke();
             
         //运动
//       var y = 0;
//          setInterval(function(){
//              y++;
//              //先清空再绘制
//              ctx.clearRect(0,0,w,h);
//              ctx.fillRect(100,y,100,100)
//          },30)
        //雨滴特效
        function Drop(){ //创建雨滴类
             
        }
        //原型
        Drop.prototype ={
            //初始化
            init:function(){
                this.x = rand(0,w);//雨滴的初始X坐标
                this.y = 0;//雨滴的初始Y坐标
                this.vy = rand(4,5) //雨滴下落的速度
                this.l = rand(0.8*h,0.9*h);//雨滴下落的最大高度
                this.r = 1;//初始半径
                this.vr = 1; //半径增大的速度
                this.a = 1; //初始透明度
                this.va = 0.9; //透明度变化系数
            },
            //绘制
            draw:function(){
                if (this.y>this.l) {
                    ctx.beginPath() //开始路径
                    //绘制波纹(圆形)
                    ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)
                    ctx.strokeStyle = 'rgba(0,255,255,'+ this.a + ')';
                    ctx.stroke();
                }else{
                    //绘制下落的雨滴
                    //ctx.clearRect(0,0,w,h);
                    ctx.fillStyle = 'rgba(0,255,255,1)'
                    ctx.fillRect(this.x,this.y,2,10);
                }
                 
                this.update();
            },
            //更新坐标
            update:function(){
                //当y坐标小于1高度的时候就一直累加
                if (this.y<this.l) {
                    this.y += this.vy;
                }else{
                    //圆形半径增大
//                  if (this.r<50) {
//                      this.r += this.vr;
//                  }else{
//                      
//                  }
                    //判断透明度
                    if (this.a>0.03) {
                        this.r += this.vr;
                        if (this.r > 50) {
                            this.a *= this.va;
                        }
                    }else{
                        //重新初始化了
                        this.init()
                    }
                     
                }
//              this.y += this.vy;
            }
        }
        //实例化雨滴对象
//      var drop = new Drop();
//      drop.init();
         
        var drops = [];
        for (var i=0; i<30; i++) {
            setTimeout(function(){
                var drop = new Drop();
                drop.init();
                drops.push(drop);
            },i*200)
             
        }
         
        setInterval(function(){
            //绘制一个透明层
            ctx.fillStyle = 'rgba(0,0,0,0.1)';
            ctx.fillRect(0,0,w,h)
            for (var i=0; i<drops.length; i++) {
                drops[i].draw()
            }
//          drop.draw()
        },1000/60); //帧数
         
        function rand(min,max){
            return Math.random()*(max-min) +min;//min~MAX
        }
    </script>
</html>

以上是关于Canvas 雨滴特效的主要内容,如果未能解决你的问题,请参考以下文章

canvas入门级基本用法实现雨滴下落特效

canvas简单下雨特效

canvas用数组方式做出下雨效果

自己定义View时,用到Paint Canvas的一些温故,简单的帧动画(动画一 ,&quot;掏粪男孩Gif&quot;顺便再提提onWindowFocusChanged)(代码片段

仿IOS中下拉刷新的“雨滴”效果

小程序各种功能代码片段整理---持续更新