javascript中canvas如何实现雨滴效果

2023-06-15 10:06:40 356人浏览八月长安

摘要

这篇文章将为大家详细讲解有关javascript中canvas如何实现雨滴效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。本文实例为大家分享了javascript canvas实现雨滴效果的具体代码，供

这篇文章将为大家详细讲解有关javascript中canvas如何实现雨滴效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

本文实例为大家分享了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.innerHeight        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.y, this.r, 0, 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++) {                // 随机生成雨滴,不是同时生成                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,0,0.05)'            ctx.fillRect(0, 0, cw, ch)            for (var k of arrRain) {                k.move()            }        }, 1000 / 80)    </script></body></html>

关于“javascript中canvas如何实现雨滴效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: javascript中canvas如何实现雨滴效果

本文链接: https://www.lsjlt.com/news/279713.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341