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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
AngularJS实现注册表单验证功能
Oct 16 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 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
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
javascript天然的迭代器
2010/10/29 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
layui导航栏实现代码
2017/05/19 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
Android interview questions
2016/12/25 面试题
质检部岗位职责
2013/11/11 职场文书
业务经理岗位职责
2013/11/11 职场文书
股权转让意向书
2014/04/01 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL