JavaScript canvas to achieve raindrop effects

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

Recommend

About uniApp editor WeChat sliding problem

The uniapp applet will have a similar drop-down p...

Use and analysis of Mysql Explain command

The mysql explain command is used to show how MyS...

vue-amap installation and usage steps

I have previously shared the usage of asynchronou...

MySQL5.7 parallel replication principle and implementation

Anyone who has a little knowledge of data operati...

Proxy_pass method in multiple if in nginx location

1. First, let's review the relevant knowledge...

How to solve nginx 503 Service Temporarily Unavailable

Recently, after refreshing the website, 503 Servi...

Example code for implementing a hollow mask layer with CSS

Contents of this article: Page hollow mask layer,...

Manually implement the two-way data binding principle of Vue2.0

In one sentence: Data hijacking (Object.definePro...

Detailed explanation of the steps for configuring the Centos7 bridge network under VMware

The complete steps of Centos7 bridge network conf...

How to install MySQL using yum on Centos7 and achieve remote connection

Centos7 uses yum to install MySQL and how to achi...

503 service unavailable error solution explanation

1. When you open the web page, 503 service unavai...

Three ways to share component logic in React

Without further ado, these three methods are: ren...

CSS XTHML writing standards and common problems summary (page optimization)

Project Documentation Directory Div+CSS Naming Sta...

Three ways to create a gray effect on website images

I’ve always preferred grayscale images because I t...

How to use wangEditor in vue and how to get focus by echoing data

Rich text editors are often used when doing backg...