JavaScript canvas to achieve raindrop effects

This article example shares the specific code of canvas to achieve raindrop effects for your reference. The specific content is as follows

1. Requirements for raindrop special effects

Raindrops fall randomly from the top of the window to the bottom, and will appear as ripples that gradually spread out and fade until they disappear. The raindrop effect adapts to the changes of the window.

2. Raindrop Implementation Idea

1. Use object-oriented thinking to first create a canvas and draw an initial shape of a raindrop
2. How to add motion to raindrops
3. Use a timer to make the raindrops move

3. Specific Analysis

1. What are the properties required for raindrop initialization?
Coordinates x, y width and height w, h.
2. Raindrops fall gradually and accelerate instead of falling at a constant speed. We need to give them an acceleration attribute, that is, the y-axis coordinates are constantly added with the acceleration value.
3. When the raindrops fall to a certain area at the bottom, they begin to show ripples and gradually spread out. That is, when they reach a certain range at the bottom, they begin to draw circles, which gradually become larger and lighter, and add transparency.
4. The trailing effect of falling raindrops requires drawing a layer of shadow to cover the previously moving raindrops

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
  })
  // Draw raindrops let raindropArr = []
  function Raindrop(x, y, w, h, l, r, dr, maxR, a, va) {
   this.x = rand(0, window.innerWidth) // x-axis of raindropsthis.y = y || 0 // y-axis of raindropsthis.dy = rand(2, 4) // Acceleration of raindropsthis.w = w || 2 // Width of raindropsthis.h = h || 10 // Height of raindropsthis.l = rand(0.8 * height, 0.9 * height) // Falling height of raindropsthis.r = r || 1 // Ripple radiusthis.dr = dr || 1 // Ripple increase radiusthis.maxR = maxR || 50 // Maximum ripple radiusthis.a = a || 1 // Ripple transparencythis.va = 0.96 // Ripple transparency coefficient}
  Raindrop.prototype = {
   draw: function (index) { // Draw 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 the raindrop coordinates to 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>

V. Conclusion

Basically any movement and special effects of canvas are achieved by changing the coordinates through js timer.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: