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.innerWidthlet height = myCanvas.height = window.innerHeightwindow.addEventListener('resize', () => {width = myCanvas.width = window.innerWidthheight = 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.drif (this.r > this.maxR) {this.a *= this.va}} else {this.a = 0raindropArr.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定时器改变坐标的方式实现
canvas 雨滴特效相关推荐
- html5 雨滴特效,canvas雨滴特效
var can = document.getElementById("canvas"); //设置绘图环境 var cxt = can.getContext("2d&qu ...
- 雨滴特效源码html,js雨滴特效
html> canvas雨滴特效 body{ margin:0; } canvas{ display: block; background-color:#090909; } var oCanva ...
- canvas的雨滴特效
canvas的雨滴特效 var canvas = document.querySelector(".rain");//获得类(获得id用#rain)ctx = canvas.get ...
- js+canvas实现雨滴特效
给大家分享一下如何用js和canvas实现炫酷的雨滴特效 思路 先准备好开发工具,我用的是HBuilderX,当然也可以用Notepad等其它代码编辑器.还要了解一下canvas标签,其实就是一张画布 ...
- H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示 代码展示 body代码 <!DOCTYPE html> <html lang="e ...
- html5怎么实现雨滴效果,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
- html雨滴状的图案代码,HTML_HTML5实现晶莹剔透的雨滴特效,复制代码代码如下: html - phpStudy...
HTML5实现晶莹剔透的雨滴特效 复制代码代码如下: HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { pos ...
- HTML5雨滴特效,晶莹剔透
<html> <head> <title>HTML5雨滴特效</title> <style media="screen" ty ...
- html页面特效是怎么做的,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
最新文章
- java.util.concurrent.locks.Condition 源码
- 服务器上装centos系统花屏,CentOS系统如何解决鼠标花屏的问题
- string.Equals 比较2个字符串是否相同忽略大小写
- html-head-body
- TensorFlow(五)常用函数与基本操作
- 前端学习(2787):完成推荐商品结构之商品栏样式书写
- 希捷银河声音大_【推仔说新闻】那款硬盘它终于来了 希捷推出首款双磁臂硬盘...
- 布林通道参数用20还是26_布林通道(BOLL)策略的投资效果如何?
- 容器中运行Fabric区块链网络
- 就如何快速免费提高网站排名小结
- JinlinOJ 通化邀请赛 E.GCD and LCM 最大公约数最小公倍数 关系
- 【译】Angular Elements 及其运作原理
- 金融计算机怎么调成链式,cfa计算器链式
- ZigBee研究之旅(三)---CC2530的电源管理模块
- roc曲线spss怎么做_如何用SPSS做ROC曲线分析?看这1篇就够了!
- 计算机辅助设计技术水平证书,计算机程序设计工程师技术水平(java)证书就是计算机技术与软件专业技术资格考试的程序员证书么?...
- linux系统文件夹
- Centos7下cobbler(补鞋匠)安装部署全过程
- 手算梯度下降法,详解神经网络迭代训练过程
- cdr文件太大怎么转成小内存 CDR文件太大打不开怎么办