javascript canvas实现雨滴效果


Posted in Javascript onJune 09, 2021

本文实例为大家分享了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 相关文章推荐
javascript中字符串的定义示例代码
Dec 19 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
用JS实现飞机大战小游戏
Jun 09 #Javascript
原生JS实现飞机大战小游戏
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
JavaScript如何优化逻辑判断代码详解
Jun 08 #Javascript
浅谈react useEffect闭包的坑
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
You might like
php注入实例
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
PHP类的反射用法实例
2014/11/03 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
Array.prototype 的泛型应用分析
2010/04/30 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
python实现线程池的方法
2015/06/30 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
python实现矩阵打印
2019/03/02 Python
python 如何在测试中使用 Mock
2021/03/01 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
新年联欢会主持词
2014/03/27 职场文书
社区助残日活动总结
2014/08/29 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
初中语文教学随笔
2015/08/15 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2016教师节感恩话语
2015/12/09 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
图文详解nginx日志切割的实现
2022/01/18 Servers
如何优化vue打包文件过大
2022/04/13 Vue.js
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python