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 相关文章推荐
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
js中function()使用方法
Dec 24 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
javascript触发模拟鼠标点击事件
Jun 26 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
用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函数
2008/10/03 PHP
PHP 输出缓存详解
2009/06/20 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
Javascript Event(事件)的传播与冒泡
2017/01/23 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
python 发送get请求接口详解
2020/11/17 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
网络工程师职业规划
2014/02/10 职场文书
股权转让协议书范本
2014/04/12 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
社区两委对照检查材料
2014/08/23 职场文书
部门2015年度工作总结
2015/04/29 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL