• 售前

  • 售后

热门帖子
入门百科

JavaScript canvas实现雨滴殊效

[复制链接]
penguinzhuyun 显示全部楼层 发表于 2021-10-25 18:50:53 |阅读模式 打印 上一主题 下一主题
本文实例为大家分享了canvas实现雨滴特效的具体代码,供大家参考,具体内容如下
一、雨滴特效需求
雨滴从窗口顶部随机着落到达底部将出现波纹逐渐散开变淡直到消散,雨滴特效随窗口变化自顺应
二、雨滴实现思绪
1. 用面向对象的头脑 首先创建canvas画布 ,绘制一个雨滴的初始化外形
2. 在给雨滴添加活动的方法
3. 通过定时器让雨滴活动起来

三、具体分析
1.雨滴初始化需要的属性有哪些?
坐标x,y 宽高w,h 。
2.雨淌着落是逐渐加快着落不是匀速需要给一个加快度的属性,也就是y轴坐标不停加上加快度的值
3.雨淌着落到底部某一个地区后开始出现波纹逐渐散开,也就是到达底部某个范围内开始画圆,圆逐渐变大并且变淡加上透明度
4.雨淌着落拖尾结果需要绘制一层阴影覆盖之前活动的雨滴

四、代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>canvas</title>
  7. <style>
  8.   * {
  9.    margin: 0;
  10.    padding: 0;
  11.   }
  12.   canvas {
  13.    vertical-align: middle;
  14.    background: #000;
  15.   }
  16. </style>
  17. </head>
  18. <body>
  19. <canvas id="myCanvas"></canvas>
  20. <script>
  21.   // 创建画布
  22.   let myCanvas = document.getElementById('myCanvas')
  23.   let ctx = myCanvas.getContext('2d')
  24.   // 自适应窗口
  25.   let width = myCanvas.width = window.innerWidth
  26.   let height = myCanvas.height = window.innerHeight
  27.   window.addEventListener('resize', () => {
  28.    width = myCanvas.width = window.innerWidth
  29.    height = myCanvas.height = window.innerHeight
  30.   })
  31.   // 绘制雨滴
  32.   let raindropArr = []
  33.   function Raindrop(x, y, w, h, l, r, dr, maxR, a, va) {
  34.    this.x = rand(0, window.innerWidth) // 雨滴的x轴
  35.    this.y = y || 0 // 雨滴的y轴
  36.    this.dy = rand(2, 4) // 雨滴的加速度
  37.    this.w = w || 2 // 雨滴的宽度
  38.    this.h = h || 10 // 雨滴的高度
  39.    this.l = rand(0.8 * height, 0.9 * height) // 雨滴的下落高度
  40.    this.r = r || 1 // 波纹半径
  41.    this.dr = dr || 1 // 波纹增加半径
  42.    this.maxR = maxR || 50 // 波纹最大半径
  43.    this.a = a || 1 // 波纹透明度
  44.    this.va = 0.96 // 波纹透明度系数
  45.   }
  46.   Raindrop.prototype = {
  47.    draw: function (index) { // 绘制雨滴
  48.     if (this.y > this.l) {
  49.      ctx.beginPath()
  50.      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
  51.      ctx.strokeStyle = `rgba(0,191,255,${this.a})`
  52.      ctx.stroke()
  53.     } else {
  54.      ctx.fillStyle = 'skyBlue'
  55.      ctx.fillRect(this.x, this.y, this.w, this.h)
  56.     }
  57.     this.update(index)
  58.    },
  59.    update: function (index) { // 更新雨滴坐标 运动起来
  60.     if (this.y > this.l) {
  61.      if (this.a > 0.03) {
  62.       this.r += this.dr
  63.       if (this.r > this.maxR) {
  64.        this.a *= this.va
  65.       }
  66.      } else {
  67.       this.a = 0
  68.       raindropArr.splice(index, 1)
  69.      }
  70.     } else {
  71.      this.y += this.dy
  72.     }
  73.    }
  74.   }
  75.   function rand(min, max) {
  76.    return Math.random() * (max - min) + min
  77.   }
  78.   setInterval(() => {
  79.    let raindrop = new Raindrop()
  80.    raindropArr.push(raindrop)
  81.   }, 100)
  82.   setInterval(() => {
  83.    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
  84.    ctx.fillRect(0, 0, myCanvas.width, myCanvas.height)
  85.    for (let i = 0; i < raindropArr.length; i++) {
  86.     raindropArr[i].draw(i)
  87.    }
  88.   }, 30)
  89. </script>
  90. </body>
  91. </html>
复制代码
五、总结
canvas根本上任何活动,特效,都是通过js定时器改变坐标的方式实现。
以上就是本文的全部内容,盼望对大家的学习有所帮助,也盼望大家多多支持草根技术分享。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作