Of Stack

JavaScript canvas realizes raindrop special effects

  • 2021-10-24 18:37:51
  • OfStack

In this paper, we share the specific code of canvas raindrop special effects for your reference. The specific contents are as follows

1. Raindrop special effects requirements

Raindrops falling randomly from the top of the window to the bottom will show ripples gradually spreading and fading until disappearing, and raindrop effects are adaptive with the changes of the window

2. Raindrop realization ideas

1. First, create canvas canvas with object-oriented thinking, and draw the initialization shape of a raindrop
2. The method of adding movement to raindrops
3. Move raindrops with a timer

3. Specific analysis

1. What are the attributes required for raindrop initialization?
Coordinates x, y Width and height w, h.
2. The falling of raindrops is gradually accelerated, not uniform, which requires an acceleration attribute, that is, the coordinates of y axis are continuously added with the acceleration value
3. After raindrops fall to a certain area at the bottom, they begin to show ripples and gradually disperse, that is, they reach a certain area at the bottom and begin to draw circles, which gradually become larger and lighter and add transparency
4. The raindrop trailing effect needs to draw a layer of shadow to cover the raindrops moving before

4. Code 


<!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>
  //  Create a canvas 
  let myCanvas = document.getElementById('myCanvas')
  let ctx = myCanvas.getContext('2d')
  //  Adaptive window 
  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
  })
  //  Drawing raindrops 
  let raindropArr = []
  function Raindrop(x, y, w, h, l, r, dr, maxR, a, va) {
   this.x = rand(0, window.innerWidth) //  Raindrop x Shaft 
   this.y = y || 0 //  Raindrop y Shaft 
   this.dy = rand(2, 4) //  Acceleration of raindrops 
   this.w = w || 2 //  Width of raindrops 
   this.h = h || 10 //  Height of raindrops 
   this.l = rand(0.8 * height, 0.9 * height) //  The falling height of raindrops 
   this.r = r || 1 //  Corrugation radius 
   this.dr = dr || 1 //  Ripple increase radius 
   this.maxR = maxR || 50 //  Maximum radius of ripple 
   this.a = a || 1 //  Corrugated transparency 
   this.va = 0.96 //  Corrugation transparency coefficient 
  }
  Raindrop.prototype = {
   draw: function (index) { //  Drawing raindrops 
    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) { //  Update raindrop coordinates   Move 
    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>

STEP 5 Summarize

Basically, any movement and special effects of canvas are realized by changing coordinates of js timer.

Related articles: