怎么在JavaScript中利用canvas實(shí)現(xiàn)一個雨滴效果-創(chuàng)新互聯(lián)

怎么在JavaScript中利用canvas實(shí)現(xiàn)一個雨滴效果？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站是一家專業(yè)提供淥口企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都網(wǎng)站制作、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為淥口眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

一、雨滴特效需求

雨滴從窗口頂部隨機(jī)下落到達(dá)底部將呈現(xiàn)波紋逐漸散開變淡直到消失，雨滴特效隨窗口變化自適應(yīng)

二、雨滴實(shí)現(xiàn)思路

1. 用面向?qū)ο蟮乃季S 首先創(chuàng)建canvas畫布，繪制一個雨滴的初始化形狀
2. 在給雨滴添加運(yùn)動的方法
3. 通過定時器讓雨滴運(yùn)動起來

三、具體分析

1.雨滴初始化需要的屬性有哪些？
坐標(biāo)x，y 寬高w，h 。
2.雨滴下落是逐漸加速下落不是勻速需要給一個加速度的屬性，也就是y軸坐標(biāo)不斷加上加速度的值
3.雨滴下落到底部某一個區(qū)域后開始呈現(xiàn)波紋逐漸散開，也就是到達(dá)底部某個范圍內(nèi)開始畫圓，圓逐漸變大并且變淡加上透明度
4.雨滴下落拖尾效果需要繪制一層陰影覆蓋之前運(yùn)動的雨滴

四、代碼

<!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>
  // 創(chuàng)建畫布
  let myCanvas = document.getElementById('myCanvas')
  let ctx = myCanvas.getContext('2d')
  // 自適應(yīng)窗口
  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 // 波紋透明度系數(shù)
  }
  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) { // 更新雨滴坐標(biāo) 運(yùn)動起來
    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>

關(guān)于怎么在JavaScript中利用canvas實(shí)現(xiàn)一個雨滴效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

名稱欄目：怎么在JavaScript中利用canvas實(shí)現(xiàn)一個雨滴效果-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://www.rwnh.cn/article14/ccisde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、商城網(wǎng)站、網(wǎng)站改版、云服務(wù)器、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

怎么在JavaScript中利用canvas實(shí)現(xiàn)一個雨滴效果-創(chuàng)新互聯(lián)