javascript canvas实现雨滴效果
作者：joyouscola 时间：2024-04-17 10:02:45
本文实例为大家分享了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>
这些也就是雨滴实现的源码，仅供参考。
来源：https://blog.csdn.net/joyouscola/article/details/115451580
标签：js,canvas,雨滴
0
投稿猜你喜欢
python压缩和解压缩模块之zlib的用法
2023-09-19 08:32:07
Python实现猜数字小游戏
2022-10-09 18:38:12
为什么不压缩 HTML
2010-05-07 12:37:00
人工智能Text Generation文本生成原理示例详解
2022-01-16 22:45:28
JavaScript设计模式之适配器模式介绍
2023-08-12 06:36:09
解决jupyter notebook import error但是命令提示符import正常的问题
2022-08-19 22:10:30
Python中的list与tuple集合区别解析
2023-01-13 11:05:23
jQuery.animate简单分析
2010-06-26 12:45:00
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2023-11-19 08:27:32
Python 怎么定义计算N的阶乘的函数
2021-04-12 01:44:04
Django在pycharm下修改默认启动端口的方法
2023-09-27 09:04:07
解决Vue2.0自带浏览器里无法打开的原因（兼容处理）
2023-07-02 16:59:02
深入了解Golang的指针用法
2024-05-21 10:22:58
sql中的 IF 条件语句的用法详解
2024-01-17 12:37:12
pandas将list数据拆分成行或列的实现
2023-12-23 01:58:41
js判断undefined类型示例代码
2024-04-19 09:53:35
go日志库中的logrus
2023-07-21 13:48:02
在Pycharm中安装Pandas库方法(简单易懂)
2023-07-21 19:26:28
Typora自动编号的具体操作
2022-01-21 03:20:18
Python Tkinter GUI编程实现Frame切换
2023-05-08 07:36:28
