javascript canvas實現雨滴效果

本文例項為大家分享了javascript canvas實現雨滴效果的具體程式碼，供大家參考，具體內容如下

先看效果

看起來很炫酷，其實就是實現了雨滴的掉落還有最後的圓

還是看原始碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #000;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        // 獲取畫布
        var canvas = document.querySelector('canvas')
        // 獲取畫筆
        var ctx = canvas.getContext('2d')
        // 不能用 
css改變畫布大小
        var ch = canvas.height = window.innerHeigwww.cppcns.comht
        var cw = canvas.width = window.innerWidth
        // 放雨滴
        var arrRain = []
        // 監聽螢幕大小，螢幕發生變化讓畫布也跟著改變大小
        window.onresize = function () {
            ch = canvas.height = window.innerHeight
            cw = canvas.width = window.innerWidth
        }
        // 獲取一個隨機數，目的是為了生成隨機雨滴
        function randow(min,max) {
            return Math.random() * (max - min) + min
        }
        // 建構函式
        function Rain() {

        }
        // 為rain新增屬性和方法
        Rain.prototype = {
    
程式設計客棧         // 初始化位置和雨滴下落的圓的半徑
            init: function () {
                this.x = randow(0,cw)
                this.y = 0
                // 雨滴最終落地的距離不能超出螢幕
                this.h = randow(0.8 * ch,0.9 * ch)
                this.r = 1 // 開始圓的半徑
                this.vr = 1 // 半徑增長的速度
                this.vy = randow(4,5)

            },// 畫方法
            draw: function () {
                // 小於h的時候，畫雨滴，畫矩形
                if (this.y < this.h) {
                    ctx.beginPath()
                    ctx.fillStyle = 'white'
                    ctx.fillRect(this.x,this.y,4,10)
                } else {
                    // 畫圓
                    ctx.beginPath()
                    ctx.strokeStyle = 'white'
                    ctx.arc(this.x,this.r,2 * Math.PI)
                    ctx.stroke()
                }
            },// 雨滴移動
            move: function () {
                // 小於h時，加y實現雨滴移動
                if (this.y < this.h) {
                    this.y += this.vy
                } else {
                    // 實現水花四濺的效果
                    if (this.r < 70) {
                        this.r += this.vr
                    } else {
                        // 結束效果之後初始化，又從天上生成雨滴，所以要呼叫init函式
                        this.init()
                    }
                }
         
程式設計客棧        this.draw()
            }
        }
        // 生成雨滴
        function createRain(num) {
            for (var i = 0; i < num; i++) {
                // 隨機生成雨滴,不是同時生成
           aHxSEeEBFZ     setTimeout(function () {
                    var rain = new Rain()程式設計客棧
                    rain.init()
                    rain.draw()
                    arrRain.push(rain)
                },300 * i)
            }
        }
        createRain(60)
        setInterval(function () {
            ctx.beginPath()
            ctx.fillStyle = 'rgba(0,0.05)'
            ctx.fillRect(0,cw,ch)
            for (var k of arrRain) {
                k.move()
            }
        },1000 / 80)
    </script>
</body>

</html>

這些也就是雨滴實現的原始碼，僅供參考。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

javascript canvas實現雨滴效果

javascript canvas實現雨滴效果

JavaScript canvas實現雨滴特效

JavaScript canvas實現七彩時鐘效果

JavaScript canvas實現七彩太陽光暈效果

JavaScript canvas實現程式碼雨效果

JavaScript canvas實現映象圖片效果

JavaScript canvas實現動態點線效果

JavaScript canvas實現九宮格切圖效果

JavaScript canvas實現雪花隨機動態飄落

JavaScript canvas實現跟隨滑鼠事件

javascript+Canvas實現畫板功能

JavaScript+canvas 實現五子棋遊戲

基於javascript canvas實現五子棋遊戲

原生js+canvas實現下雪效果

javascript canvas實現簡易時鐘例子

使用js和canvas實現時鐘效果

javascript canvas拖尾效果

JavaScript+Canvas實現自定義畫板

js+canvas實現轉盤效果（兩個版本）

JavaScript canvas實現文字時鐘

javascript canvas實現雨滴效果

相關推薦