JavaScript canvas实现雨滴特效
本文实例为大家分享了canvas实现雨滴特效的具体代码，供大家参考，具体内容如下
一、雨滴特效需求
雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失，雨滴特效随窗口变化自适应
二、雨滴实现思路
1. 用面向对象的思维 首先创建canvas画布 ，绘制一个雨滴的初始化形状
2. 在给雨滴添加运动的方法
3. 通过定时器让雨滴运动起来
三、具体分析
1.雨滴初始化需要的属性有哪些？
坐标x，y 宽高w，h 。
2.雨滴下落是逐渐加速下落不是匀速需要给一个加速度的属性，也就是y轴坐标不断加上加速度的值
3.雨滴下落到底部某一个区域后开始呈现波纹逐渐散开，也就是到达底部某个范围内开始画圆，圆逐渐变大并且变淡加上透明度
4.雨滴下落拖尾效果需要绘制一层阴影覆盖之前运动的雨滴
四、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
vertical-align: middle;
background: #000;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
// 创建画布
let myCanvas = document.getElementById('myCanvas')
let ctx = myCanvas.getContext('2d')
// 自适应窗口
let width = myCanvas.width = window.innerWidth
let height = myCanvas.height = window.innerHeight
window.addEventListener('resize', () => {
width = myCanvas.width = window.innerWidth
height = myCanvas.height = window.innerHeight
})
// 绘制雨滴
let raindropArr = []
function Raindrop(x, y, w, h, l, r, dr, maxR, a, va) {
this.x = rand(0, window.innerWidth) // 雨滴的x轴
this.y = y || 0 // 雨滴的y轴
this.dy = rand(2, 4) // 雨滴的加速度
this.w = w || 2 // 雨滴的宽度
this.h = h || 10 // 雨滴的高度
this.l = rand(0.8 * height, 0.9 * height) // 雨滴的下落高度
this.r = r || 1 // 波纹半径
this.dr = dr || 1 // 波纹增加半径
this.maxR = maxR || 50 // 波纹最大半径
this.a = a || 1 // 波纹透明度
this.va = 0.96 // 波纹透明度系数
}
Raindrop.prototype = {
draw: function (index) { // 绘制雨滴
if (this.y > this.l) {
ctx.beginPath()
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
ctx.strokeStyle = `rgba(0,191,255,${this.a})`
ctx.stroke()
} else {
ctx.fillStyle = 'skyBlue'
ctx.fillRect(this.x, this.y, this.w, this.h)
}
this.update(index)
},
update: function (index) { // 更新雨滴坐标 运动起来
if (this.y > this.l) {
if (this.a > 0.03) {
this.r += this.dr
if (this.r > this.maxR) {
this.a *= this.va
}
} else {
this.a = 0
raindropArr.splice(index, 1)
}
} else {
this.y += this.dy
}
}
}
function rand(min, max) {
return Math.random() * (max - min) + min
}
setInterval(() => {
let raindrop = new Raindrop()
raindropArr.push(raindrop)
}, 100)
setInterval(() => {
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
ctx.fillRect(0, 0, myCanvas.width, myCanvas.height)
for (let i = 0; i < raindropArr.length; i++) {
raindropArr[i].draw(i)
}
}, 30)
</script>
</body>
</html>
五、总结
canvas基本上任何运动，特效，都是通过js定时器改变坐标的方式实现。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript canvas实现雨滴效果
本文实例为大家分享了javascript canvas实现雨滴效果的具体代码,供大家参考,具体内容如下 先看效果 看起来很炫酷,其实就是实现了雨滴的掉落还有最后的圆 还是看源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi
-
JavaScript canvas实现雨滴特效
本文实例为大家分享了canvas实现雨滴特效的具体代码,供大家参考,具体内容如下 一.雨滴特效需求 雨滴从窗口顶部随机下落到达底部将呈现波纹逐渐散开变淡直到消失,雨滴特效随窗口变化自适应 二.雨滴实现思路 1. 用面向对象的思维 首先创建canvas画布 ,绘制一个雨滴的初始化形状 2. 在给雨滴添加运动的方法 3. 通过定时器让雨滴运动起来 三.具体分析 1.雨滴初始化需要的属性有哪些? 坐标x,y 宽高w,h . 2.雨滴下落是逐渐加速下落不是匀速需要给一个加速度的属性,也就是y轴坐标不断加
-
基于JavaScript实现动态雨滴特效
目录 演示 技术栈 源码 设置画布 js部分 演示 技术栈 介绍一下画布吧: HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过, 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性 它的方法挺多的大家可以去搜一下我就说几个常用的: 源码 设置画布 <canvas id="canvas" style="position:
-
JavaScript canvas实现流星特效
本文实例为大家分享了JavaScript canvas实现流星特效展示的具体代码,供大家参考,具体内容如下 1.控制透明度变化函数 function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根构建的缓慢减速运动 核心函数:x*x + 2*x function easeOu
-
JavaScript+Canvas实现文字粒子流特效
目录 动手前思考 绘制文字 获取像素点位 渲染粒子 简单的动画效果 1.随机选择四个方向中的某一个方向,生成初始坐标 2.从初始位置运动到实际位置 3.点击文字炸开的特效 动手前思考 首先要在特定的位置生成粒子,要获取到canvas上像素的点位,通过canvas的getImageData函数我们可以得到canvas像素点的信息,获取像素点中透明度大于0的位置. 绘制文字 新建一个canvas画布,在画布上绘制任意的文字 ctx.font = "200px Arial"; ctx.fon
-
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 Canvas编写炫彩的网页时钟
本文实例为大家分享了JavaScript Canvas编写炫彩网页时钟的具体代码,供大家参考,具体内容如下 只是利用了Canvas制作的. 示意图如下: <!DOCTYPE html> <html> <head> <meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" /> <title> 网
-
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法.分享给大家供大家参考,具体如下: 1.convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布:彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData():最后为myImage指定彩色图片的路径. 2.getColorData(
-
基于JavaScript实现新年贺卡特效
目录 动图演示 主要代码 css样式 Javascirpt 动图演示 一款超级炫酷的2022新年快乐html网页特效,霓虹的城市夜景和绚烂的烟花很是特别,该html页面还有交互效果,点击鼠标就会呈现烟花绽放的特效,唯美不过如此.图片可以换成自己喜欢的夜景或人物都可以. 主要代码 图片选择引入: html, body { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: Montserrat, sans
-
html+JavaScript烟花3D简单特效（亲测可用）
网页烟花特效方便使用,更能给养眼享受,复制黏贴就能使用,快来试试吧.这篇文章主要介绍了html+JavaScript烟花3D特效(亲测可用),需要的朋友可以参考下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus"&g