js canvas realizes circular water animation
|
This article example shares the specific code of canvas to realize circular water animation for your reference. The specific content is as follows PrefaceSpecial effects display Effect display
Code Showcaseindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="style.css" > -->
</head>
<body>
<script src="main.js"></script>
</body>
</html>main.js
/*
* Noel Delgado - @pixelia_me
*/
(function() {
var ctx, w, h, cx, cy, PI, PI_HALF, cos, sin, random, lineWidth, C,
rings, ringsLength, data;
ctx = document.createElement('canvas').getContext('2d');
w = 600;
h = 600;
cx = (w / 2);
cy = (h / 2);
rings = [];
ringsLength = 0;
PI = Math.PI;
PI_HALF = PI / 2;
cos = Math.cos;
sin = Math.sin;
random = Math.random;
lineWidth = 0.2;
C = ["#ABF8FF", "#E76B76", "#1D2439", "#4F3762", "#67F9FF", "#0C0F18"];
data = [
/* ring {t:total_particles, r:radius, d:distance, s:speed, c:color} */
[
{t:80, r:(cx-10), d:40, s:30, c:C[1]},
{t:60, r:(cx-20), d:40, s:80, c:C[2]},
{t:20, r:(cx-30), d:20, s:80, c:C[2]},
],
[
{t:80, r:(cx-80), d:40, s:40, c:C[4]},
{t:80, r:(cx-90), d:20, s:40, c:C[4]},
{t:20, r:(cx-100), d:20, s:40, c:C[2]},
{t:40, r:(cx-110), d:20, s:40, c:C[2]},
],
[
{t:60, r:(cx-160), d:40, s:20, c:C[2]},
{t:20, r:(cx-170), d:30, s:60, c:C[2]},
{t:40, r:(cx-180), d:40, s:60, c:C[2]},
],
[
{t:40, r:(cx-230), d:40, s:20, c:C[5]},
{t:20, r:(cx-240), d:20, s:10, c:C[5]},
],
[
{t:10, r:(cx-290), d:10, s:10, c:C[4]}
]
];
/* */
ctx.canvas.width = w;
ctx.canvas.height = h;
document.body.appendChild(ctx.canvas);
data.forEach(function(group) {
var ring = [];
group.forEach(function(orbit, i) {
var total_particles, index;
total_particles = orbit.t;
index = 0;
for (; index < total_particles; index++) {
var radius, distance, speed, color, opacity;
radius = orbit.r;
distance = orbit.d;
speed = random() / orbit.s;
speed = i % 2 ? speed : speed * -1;
color = orbit.c;
opacity = orbit.o;
ring.push(new P(radius, distance, speed, color, opacity));
radius = distance = speed = color = opacity = null;
}
});
rings.push(ring);
});
ringsLength = rings.length;
/* */
function P(radius, distance, speed, color) {
this.a = PI / 180;
this.d = distance;
this.d2 = (this.d * this.d);
this.x = cx + radius * cos(this.a);
this.y = cy + radius * sin(this.a);
this.c = color;
this.r = (random() * 8);
this.R = random() > 0.5 ? radius : radius - 5;
this.s = speed;
this.pos = random() * 360;
}
function draw() {
var i, j, k, xd, yd, d, ring, ringLength, ringLength2, particle, p2;
ctx.beginPath();
ctx.globalCompositeOperation = "source-over";
ctx.rect(0, 0 , w, h);
ctx.fillStyle = "#151a28";
ctx.fill();
ctx.closePath();
for (i = 0; i < ringsLength; i++) {
ring = rings[i];
ringLength = ring.length;
ringLength2 = ringLength - 100;
for (j = 0; j < ringLength; j++) {
particle = ring[j];
particle.x = cx + particle.R * sin(PI_HALF + particle.pos);
particle.y = cy + particle.R * cos(PI_HALF + particle.pos);
particle.pos += particle.s;
ctx.beginPath();
ctx.globalAlpha = 0.12;
ctx.globalCompositeOperation = "lighter";
ctx.fillStyle = particle.c;
ctx.arc(particle.x, particle.y, particle.r, PI * 2, false);
ctx.fill();
ctx.closePath();
for (k = 0; k < ringLength2; k++) {
p2 = ring[k];
yd = p2.y - particle.y;
xd = p2.x - particle.x;
d = ((xd * xd) + (yd * yd));
if (d < particle.d2) {
ctx.beginPath();
ctx.globalAlpha = 1;
ctx.lineWidth = lineWidth;
ctx.moveTo(particle.x, particle.y);
ctx.lineTo(p2.x, p2.y);
ctx.strokeStyle = p2.c;
ctx.stroke();
ctx.closePath();
}
}
}
}
}
function loop() {
draw();
requestAnimationFrame(loop);
}
loop();
})();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:
|
<<: Use the more, less, and cat commands in Linux to view file contents
>>: MySQL optimization: use join instead of subquery
Recommend
Vue-router example code for dynamically generating navigation menus based on backend permissions
Table of contents Vue.js 1. Register global guard...
Detailed explanation of the basic commands of Docker run process and image
Table of contents 1. Run workflow 2. Basic comman...
Sample code for achieving three-dimensional picture placement effect with pure CSS
1. Percentage basis for element width/height/padd...
Example of writing mobile H5 to invoke APP (IOS, Android)
iOS 1. URL scheme This solution is basically for ...
Detailed explanation of MySQL database--multi-table query--inner join, outer join, subquery, correlated subquery
Multi-table query Use a single select statement t...
SQL Aggregation, Grouping, and Sorting
Table of contents 1. Aggregate Query 1. COUNT fun...
An article teaches you JS function inheritance
Table of contents 1. Introduction: 2. Prototype c...
jQuery implements nested tab function
This article example shares the specific code of ...
How to change the character set encoding to UTF8 in MySQL 5.5/5.6 under Linux
1. Log in to MySQL and use SHOW VARIABLES LIKE &#...
Detailed explanation of the process of building an image server with nginx (the difference between root and alias)
The installation process is omitted (I installed ...
How to encapsulate the table component of Vue Element
When encapsulating Vue components, I will still u...
Detailed explanation of docker entrypoint file
When writing a Dockerfile, include an entrypoint ...
SQL-based query statements
Table of contents 1. Basic SELECT statement 1. Qu...
How to create a style guide for your website in web interface design (with pictures and text)
What is a style guide? Simply put, it’s a document...
How to configure CDN scheduling using Nginx_geo module
Introducing the Geo module of Nginx The geo direc...