JavaScript canvas to achieve raindrop effect
|
This article example shares the specific code for JavaScript canvas to achieve raindrop effects for your reference. The specific content is as follows See the effect first
It looks very cool, but it actually realizes the falling of raindrops and the final circle. Or look at the source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
// Get the canvas var canvas = document.querySelector('canvas')
// Get the brush var ctx = canvas.getContext('2d')
// Cannot change canvas size using CSS var ch = canvas.height = window.innerHeight
var cw = canvas.width = window.innerWidth
// Release raindrops var arrRain = []
// Monitor the screen size, and change the size of the canvas accordingly window.onresize = function () {
ch = canvas.height = window.innerHeight
cw = canvas.width = window.innerWidth
}
// Get a random number in order to generate random raindrops function randow(min, max) {
return Math.random() * (max - min) + min
}
// Constructor function Rain() {
}
// Add properties and methods to rain Rain.prototype = {
// Initialize the position and radius of the circle where the raindrops fall init: function () {
this.x = randow(0, cw)
this.y = 0
// The distance that the raindrops finally land on the ground cannot exceed the screen this.h = randow(0.8 * ch, 0.9 * ch)
this.r = 1 // Starting radius of the circle this.vr = 1 // Speed at which the radius grows this.vy = randow(4, 5)
},
// Drawing method draw: function () {
// When it is less than h, draw raindrops and rectangles if (this.y < this.h) {
ctx.beginPath()
ctx.fillStyle = 'white'
ctx.fillRect(this.x, this.y, 4, 10)
} else {
// Draw a circle ctx.beginPath()
ctx.strokeStyle = 'white'
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI)
ctx.stroke()
}
},
//Raindrop movement move: function () {
// When it is less than h, add y to make the raindrops move if (this.y < this.h) {
this.y += this.vy
} else {
// Achieve the effect of splashing water if (this.r < 70) {
this.r += this.vr
} else {
// Initialize after the effect ends and generate raindrops from the sky, so call the init function this.init()
}
}
this.draw()
}
}
// Generate raindrops function createRain(num) {
for (var i = 0; i < num; i++) {
// Generate raindrops randomly, not simultaneously setTimeout(function () {
var rain = new Rain()
rain.init()
rain.draw()
arrRain.push(rain)
}, 300 * i)
}
}
createRain(60)
setInterval(function () {
ctx.beginPath()
ctx.fillStyle = 'rgba(0,0,0,0.05)'
ctx.fillRect(0, 0, cw, ch)
for (var k of arrRain) {
k.move()
}
}, 1000 / 80)
</script>
</body>
</html>These are the source codes implemented by Raindrops, for reference only. 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:
|
<<: Mysql join query principle knowledge points
>>: Three ways to forward linux ssh port
Recommend
Detailed explanation of the implementation of manual and automatic tracking of WeChat applet (Taro)
If every company wants to increase its user base,...
Complete steps to build a squid proxy server in linux
Preface This article mainly introduces the releva...
How to query a record in Mysql in which page of paging
Preface In practice, we may encounter such a prob...
Example of how to implement MySQL cascading replication
The so-called cascading replication is that the m...
26 Commonly Forgotten CSS Tips
This is a collection of commonly used but easily ...
Detailed explanation of the initialization mechanism in bash
Bash Initialization Files Interactive login shell...
Share MySql8.0.19 installation pit record
The previous article introduced the installation ...
MySQL table field time setting default value
Application Scenario In the data table, the appli...
The difference between div and span in HTML (commonalities and differences)
Common points: The DIV tag and SPAN tag treat som...
Analysis of the principle of centering elements with CSS
It is a very common requirement to set the horizo...
Bootstrap 3.0 study notes grid system principle
Through the brief introduction in the previous tw...
Solution to JS out-of-precision number problem
The most understandable explanation of the accura...
Let's talk about bitwise operations in React source code in detail
Table of contents Preface Several common bit oper...
Detailed description of the use of advanced configuration of Firewalld in Linux
IP masquerading and port forwarding Firewalld sup...
MySQL quick recovery solution based on time point
The reason for writing such an article is that on...