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 相关文章推荐
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python实现人民币大写转换
2018/06/20 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
python基于openpyxl生成excel文件
2020/12/23 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
四年的大学生生活自我评价
2013/12/09 职场文书
招商引资工作汇报
2014/10/28 职场文书
党章学习心得体会2016
2016/01/14 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server