Black hole special effects of HTML5+Canvas
Black hole special effects of HTML5+Canvas
<html>
<head>
<meta charset="utf-8">
<title>不要失去你的彩虹</title>
<style>
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id=c></canvas>
<script>
let w = c.width = window.innerWidth;
let h = c.height = window.innerHeight;
const ctx = c.getContext('2d');
const opts = {
hexLength: 30,
lenFn: ({ len, t }) =>
len Math.sin(t),
radFn: ({ rad, len, t, excitement }) =>
rad (excitement opts.propFn({ len, t }))*2 / 4,
propFn: ({ len, t }) =>
len / opts.hexLength / 10 - t,
excitementFn: ({ len, t }) =>
Math.sin(opts.propFn({ len, t }))**2,
colorFn: ({ rad, excitement, t }) =>
`hsl(${rad / Math.TAU * 360 t}, ${excitement * 100}%, ${20 excitement * 50}%)`,
timeStep: .01,
randomJig: 8,
repaintColor: 'rgba(0,0,0,.1)'
};
let tick = 0;
Math.TAU = 6.28318530717958647692;
const vertices = [];
class Vertex {
constructor({ x, y }) {
this.len = Math.sqrt(x*x y*y);
this.rad = Math.acos(x / this.len) * (y > 0 ? 1 : -1) .13;
this.prevPoint = { x, y };
}
step() {
const excitement = opts.excitementFn({ len: this.len, t: tick });
const param = {
len: this.len,
rad: this.rad,
t: tick,
excitement
};
const nextLen = opts.lenFn(param);
const nextRad = opts.radFn(param);
const color = opts.colorFn(param);
ctx.strokeStyle = color;
ctx.lineWidth = excitement .2;
ctx.beginPath();
ctx.moveTo(this.prevPoint.x, this.prevPoint.y);
this.prevPoint.x = nextLen * Math.cos(nextRad)
Math.random() * (1-excitement)**2 * opts.randomJig * 2 - opts.randomJig;
this.prevPoint.y = nextLen * Math.sin(nextRad)
Math.random() * (1-excitement)**2 * opts.randomJig * 2 - opts.randomJig;
ctx.lineTo(this.prevPoint.x, this.prevPoint.y);
ctx.stroke();
}
static gen() {
vertices.length = 0;
const hexCos = Math.cos(Math.TAU / 12) * opts.hexLength;
const hexSin = Math.sin(Math.TAU / 12) * opts.hexLength;
let alternanceX = false;
for(let x = 0; x < w; x = hexCos) {
let alternance = alternanceX = !alternanceX;
for(let y = 0; y < h; y = hexSin opts.hexLength) {
alternance = !alternance;
vertices.push(new Vertex({
x: x - w / 2,
y: y alternance * hexSin - h / 2
}))
}
}
}
}
Vertex.gen();
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
const anim = () => {
window.requestAnimationFrame(anim);
tick = opts.timeStep;
ctx.fillStyle = opts.repaintColor;
ctx.fillRect(0, 0, w, h);
ctx.translate(w/2, h/2);
vertices.forEach((vertex) => vertex.step());
ctx.translate(-w/2, -h/2);
}
anim();
window.addEventListener('resize', () => {
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
Vertex.gen();
tick = 0;
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
})
</script>
</body>
</html>
这是一个HTML5 Canvas的黑洞特效，需要的朋友可以直接下载使用，更多特效代码尽在PHP中文网。
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
HTML5 Canvas realizes the special effects of fireworks blooming
03 Jul 2018
This is a gorgeous HTML5 Canvas animation. It will simulate the animation special effects of fireworks blooming in our lives. The effect is very realistic. Let’s briefly analyze the process and code of implementing this HTML5 fireworks special effect. For those who are interested You can refer to it
Text animation special effects based on HTML5 Canvas
02 Apr 2018
This article shares with you the text animation special effects based on HTML5 Canvas. It is very useful. Friends in need can use it for reference.
Realistic fireworks special effects plug-in based on HTML5 canvas
18 Jan 2017
jquery-fireworks is a jQuery plug-in for realistic fireworks special effects based on HTML5 Canvas. The plugin is simple to use and freely configurable. It can generate realistic fireworks effects in a div container.
应用程序源代码：
CSS部分：
16 May 2016
Six simple and common HTML5 Canvas special effects filters have been implemented and encapsulated into a pure JavaScript callable API file gloomyfishfilter.js. The program source code is as follows. Interested friends can refer to it.
HTML5 Canvas mobile lucky draw special effects
18 Jan 2017
This is a lucky draw special effect based on jquery and HTML5 Canvas. The lucky prize special effect supports mobile terminals. It generates a grand prize disk by dynamically constructing Canvas elements, and randomly obtains prizes through jquery code.
A graphic and text appreciation of 8 gorgeous HTML5 text animation special effects
06 Mar 2017
Text is the soul of web pages. A long time ago, someone invented many beautiful computer fonts, which gave web pages different styles. With the emergence of HTML5 and CSS3, we can make text more personalized. In some situations where necessary, we can even use HTML5 to animate text. This article shares 8 very gorgeous HTML5 text animation special effects, I hope it can be used as a reference for you. 1. CSS3 3D folding and flipping text animation Today we are going to share a CSS3 text special effects application. It is similar to the HTML5/CSS3 text effects shared before. It is also a CSS3 3D folding and flipping text animation, only...
How to make black background with special effects debris fireworks in canvas
13 Mar 2018
This time I will show you how to make crumb fireworks with a black background and special effects using canvas. What are the precautions for making crumb fireworks with a black background and special effects using canvas? Here is a practical case, let’s take a look.
Loading animation special effects based on HTML5 Canvas and Rebound animation
19 Jan 2017
This is a Loading animation special effect based on HTML5 Canvas and Rebound animation. The loading animation uses a canvas to cover the entire page and displays a polygonal loading loader to represent the loading progress.
Detailed introduction to the video special effects code of HTML5 Canvas fragmentation and reorganization
06 Mar 2017
Maybe you have seen the HTML5 image breaking animation special effect, and the principle of implementation is quite simple. But you may have never seen that videos can be broken and reorganized. This HTML5 animation uses the related features of Canvas to achieve the effect of breaking and reorganizing videos with a click of the mouse. Click the mouse in the video area to break the video in that area. After a period of time, the broken area can be reorganized and restored, and the visual effect is great. Online demo source code download HTML code <div style='display:none'> <video id='source..
Hot Tools
HTML5 Canvas heart fluttering animation special effects
HTML5 Canvas heart fluttering animation special effect is a generated animation that can be directly opened with a browser to see a heart.
H5 panda bouncing game source code
HTML5 Mobile Panda is also a crazy game source code. Game description: Press and hold the screen to adjust the strength of the panda spring and jump to the stone pillar. The game ends if you fall into the river.
HTML5 Valentine's Day box animation special effects
Based on svg, draw animations of opening love box gifts on Valentine's Day, and special effects of love box animation.
H5 3D rolling ball game source code
HTML5 cool 3D ball rolling mobile game code download. Game introduction: A colored ball rolls, and the current track of the colored ball is controlled by dragging it with the mouse or the touch screen of the mobile phone. This is a simple and easy-to-operate mobile game source code.