JavaScript canvas实现雨滴特效


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
Sep 06 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 #Javascript
JS实现页面侧边栏效果探究
Jan 08 #Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
详解Typescript里的This的使用方法
Jan 08 #Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 #Javascript
You might like
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
2019/09/12 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
android面试问题与答案
2016/12/27 面试题
民主生活会对照检查材料
2014/09/22 职场文书
个人总结怎么写
2015/02/26 职场文书
秋收起义观后感
2015/06/11 职场文书
国富论读书笔记
2015/06/26 职场文书
2015年中秋节主持词
2015/07/30 职场文书
python not运算符的实例用法
2021/06/30 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技