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实现雨滴特效
本文实例为大家分享了canvas实现雨滴特效的具体代码,供大家参考,具体内容如下 一.雨滴特效需求 雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失,雨滴特效随窗口变化自适应 二.雨滴实现思路 1. 用面向对象的思维 首先创建canvas画布 ,绘制一个雨滴的初始化形状 2. 在给雨滴添加运动的方法 3. 通过定时器让雨滴运动起来 三.具体分析 1.雨滴初始化需要的属性有哪些? 坐标x,y 宽高w,h . 2.雨滴下落是逐渐加速下落不是匀速需要给一个加速度的属性,也就是y轴坐标不断加
-
javascript canvas实现雨滴效果
本文实例为大家分享了javascript canvas实现雨滴效果的具体代码,供大家参考,具体内容如下 先看效果 看起来很炫酷,其实就是实现了雨滴的掉落还有最后的圆 还是看源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
-
JavaScript+canvas实现七色板效果实例
本文实例讲述了JavaScript+canvas实现七色板效果.分享给大家供大家参考,具体如下: 效果图如下: html: <canvas id="canvas" class="canvas" width="600" height="600"></canvas> css: html,body{margin: 0;padding: 0} .canvas{display: block; margin-lef
-
JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
-
JavaScript+HTML5 canvas实现放大镜效果完整示例
本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas放大镜</title> <style> #copycanvas { border: 1px
-
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"
-
JavaScript canvas实现镜像图片效果
本文实例为大家分享了JavaScript canvas实现镜像图片效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using image</title> <style type="text/css"> * { /* margin: 0; padding: 0; */ bo
-
JavaScript canvas实现动态点线效果
本文实例为大家分享了JavaScript canvas实现动态点线效果的具体代码,供大家参考,具体内容如下 效果预览 1.实现效果 画彩色点 相近的点产生连线 点线运动,遇到边界反弹 选中点,可拖动点改变位置* 2.具体实现 初始化相关变量 var c = document.getElementById("myCanvas"); //设置canvas大小 c.height = document.body.offsetHeight; c.width = document.body.off
-
JavaScript Canvas绘制动态线框效果
本文实例为大家分享了JavaScript Canvas绘制动态线框效果的具体代码,供大家参考,具体内容如下 本周项目,移动端页面开发,要求丰富的动效,主要技术实现 Canvas :其中绘制动态线框,走了点弯路,所谓的弯路是逻辑问题,非技术实现方式. 一.涉及技术点,具体如下: 1.html 中引入canvas 标签,设置宽高: <canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas,请更换版本</canvas>
-
JavaScript canvas实现字符雨效果
本文实例为大家分享了JavaScript canvas实现字符雨效果的具体代码,供大家参考,具体内容如下 字符雨效果 分析如何实现 字符雨从上往下逐渐消失: 这是canvas每次画字符的时候就画一遍黑色背景,但是这个背景是有透明度的,并且这个黑色背景的透明度还比较小,只有零点零八(经过测试,0.08比较合适,也可以更改查看效果):字符是从上往下落,上面的字符先出现,下面的字符后出现,程序重复地画黑色背景,就算有透明度,叠加起来,上面的字符就会先被覆盖,下面的后出现的字符还是还比较明显,就形成了逐