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:

JavaScript canvas to achieve raindrop effect

<<: Various types of jQuery web page verification code plug-in code examples

>>: JavaScript to implement click to switch verification code and verification

JavaScript canvas to achieve raindrop effects

Why Nginx is better than Apache

The difference between the name and id of the a tag's target pointing to the iframe

Detailed explanation of Vue identity authentication management and tenant management

What is a MySQL index? Ask if you don't understand

Design of pop-up windows and floating layers in web design

A brief analysis of whether using iframe to call a page will cache the page

Docker connects to a container through a port

Pure CSS to achieve cloudy weather icon effect

Solution for Baidu site search not supporting https (tested)

Detailed explanation of JavaScript clipboard usage

Recommend

Design perspective technology is an important capital of design ability

How to use the WeChat Mini Program lottery component

How to use ElementUI pagination component Pagination in Vue

Installation and deployment of Linux tool Nethogs to monitor network bandwidth by process

Common HTML tag writing errors

MySQL sorting feature details

Vue integrates PDF.js to implement PDF preview and add watermark steps

Detailed explanation of how to introduce custom fonts (font-face) in CSS

Detailed explanation of the principle of distributed locks and three implementation methods

The use of anchor points in HTML_PowerNode Java Academy

How to update Ubuntu 20.04 LTS on Windows 10

In-depth explanation of the principle of MySQL Innodb index

Historical Linux image processing and repair solutions

CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code

A brief discussion on the solution of Tomcat garbled code and port occupation