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 相关文章推荐
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
详解vue 实例方法和数据
Oct 23 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
多种类型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手册及PHP编程标准
2006/12/17 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python实现代理服务功能实例
2013/11/15 Python
Python实现统计单词出现的个数
2015/05/28 Python
python中的闭包函数
2018/02/09 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
课前三分钟演讲稿
2014/04/24 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
指导教师推荐意见
2015/06/05 职场文书
教师外出学习心得体会
2016/01/18 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers