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>
    
    
  • 相关阅读:
    飞入飞出效果
    【JSOI 2008】星球大战 Starwar
    POJ 1094 Sorting It All Out
    POJ 2728 Desert King
    【ZJOI 2008】树的统计 Count
    【SCOI 2009】生日快乐
    POJ 3580 SuperMemo
    POJ 1639 Picnic Planning
    POJ 2976 Dropping Tests
    SPOJ QTREE
  • 原文地址:https://www.cnblogs.com/fan979398/p/11097928.html
Copyright © 2011-2022 走看看