zoukankan      html  css  js  c++  java
  • JS雨滴下落效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>canvas雨滴特效</title>
    </head>
    <style>
        body{
            margin:0;
        }
        canvas{
            display: block;
            background-color:#090909;
        }
    </style>
    <body>
    <canvas class="rain">
    </canvas>
    <script>
        var oCanvas=document.querySelector(".rain");
        var aRain=[];
        var w=window.innerWidth;
        var h=window.innerHeight;
        oCanvas.width=w;
        oCanvas.height=h;
        window.onresize =function(){
            w=window.innerWidth;
            h=window.innerHeight;
            oCanvas.width=w;
            oCanvas.height=h;
        }();
        var canCon=oCanvas.getContext("2d");
     
        /*var y=0;
        */
        function random(min,max){
            return Math.random()*(max-min)+min;
        };
        function Rain(){};
        Rain.prototype={
            init:function(){
                this.x=random(0,w+100);
                this.y=0;
                this.w=1;
                this.h=8;
                this.color="#3ff";
                this.vy=random(2,3);
                this.height=random(0.8*h,0.9*h);
                this.r=2;
                this.maxR=random(30,70);
            },
            draw:function(){
                if(this.y<this.height){
                    canCon.fillStyle= this.color;
                    canCon.fillRect(this.x,this.y,this.w,this.h);
                }else{
                    canCon.beginPath();
                    canCon.strokeStyle=this.color;
                    canCon.arc(this.x,this.y,this.r,0,Math.PI*2);
                    canCon.stroke();
                }
            },
            move:function () {
                if(this.y<this.height){
                    this.y+=this.vy;
    				this.x-=1;
                }else {
                    if(this.r<this.maxR){
                        this.r++;
                    }else {
                        this.init();
                    }
                }
                this.draw();
            }
        }
     
        function createRain(num,time){
            for(var i=0;i<num;i++){
                setTimeout(function (){
                    var rain=new Rain();
                    rain.init();
                    rain.draw();
                    aRain.push(rain);
                },time*i);
            }
        }
        createRain(30,400);
        setInterval( function(){
            canCon.fillStyle="rgba(0,0,0,0.09)";
            canCon.fillRect(0,0,w,h);
           for(var item of aRain){
            item.move();
        }
        },1000/60);
    </script>
    </body>
    </html>
    
    
  • 相关阅读:
    动态规划(最长公共序列,最长上升序列)
    滴滴笔试--算术转移(20190827)
    线段树和树状数组
    pair和list学习
    数据结构--树(建立、遍历)
    tmux常用命令与快捷键
    机器学习实战-逻辑回归
    字符流中第一个重复的字符
    机器学习实战-朴素贝叶斯
    Python第三方库
  • 原文地址:https://www.cnblogs.com/fan979398/p/11097928.html
Copyright © 2011-2022 走看看