Spezialeffekte des Schwarzen Lochs von HTML5+Canvas
Spezialeffekte des Schwarzen Lochs von HTML5+Canvas
<html>
<Kopf>
<meta charset="utf-8">
<title>不要失去你的彩虹</title>
<Stil>
Leinwand {
Position: absolut;
oben: 0;
links: 0;
}
</style>
</head>
<body>
<canvas id=c></canvas>
<script>
sei w = c.width = window.innerWidth;
sei 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, aufgeregt }) =>
rad (excitement opts.propFn({ len, t }))*2 / 4,
propFn: ({ len, t }) =>
len / opts.hexLength / 10 - t,
aufgeregtFn: ({ len, t }) =>
Math.sin(opts.propFn({ len, t }))**2,
colorFn: ({ rad, aufregend, t }) =>
`hsl(${rad / Math.TAU * 360 t}, ${excitement * 100}%, ${20 excitement * 50}%)`,
Zeitschritt: .01,
randomJig: 8,
repaintColor: 'rgba(0,0,0,.1)'
};
lass tick = 0;
Math.TAU = 6,28318530717958647692;
const vertices = [];
Klasse Vertex {
Konstruktor({ 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: ankreuzen,
Aufregung
};
const nextLen = opts.lenFn(param);
const nextRad = opts.radFn(param);
const color = opts.colorFn(param);
ctx.StrokeStyle = Farbe;
ctx.lineWidth = Aufregung .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 Alternanz * 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();
Häkchen = 0;
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
})
</script>
</body>
</html>
这是一个HTML5 Canvas的黑洞特效,需要的朋友可以直接下载使用,更多特效代码尽在PHP中文网.
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
09 Oct 2016
Verschiedene Spezialeffekte des Filters in CSS3
HTML5CSS3-Spezialeffekte – Ball springt auf und ab
14 Oct 2016
HTML5CSS3-Spezialeffekte – Ball springt auf und ab
04 Aug 2016
Ich habe einige gut aussehende Websites gesehen und wollte wissen, wie ihre Animationen und Spezialeffekte erstellt wurden. Gibt es eine Software oder ein Plug-in, das die gesamte URL einschließlich JS- und CSS-Stilen extrahieren kann?
Können HTML5 und CSS3 wirklich Kreise zeichnen?
23 Nov 2024
Kreise mit HTML5 und CSS3 zeichnenDiese Frage untersucht die Möglichkeit, Kreise mit HTML5 und CSS3 zu zeichnen. Können HTML5 und CSS3 ... erstellen?
Wie kann man Videoquellen in HTML5 dynamisch ändern, ohne Probleme mit der Browserkompatibilität?
23 Nov 2024
Videoquellen in HTML5 dynamisch ändernProblembeschreibungBeim Versuch, Videoquellen in einem HTML5-Tag dynamisch zu ändern...
Wie kann ich Tabellenattribute in CSS in HTML5 migrieren?
31 Oct 2024
HTML5-Tabellenattribute Die HTML5-Validierungsfunktion von TransitionVisual Studio identifiziert Cellpadding-, Cellspacing-, Valign- und Align-Attribute als ...
Hot Tools
HTML5-Canvas-Herzflattern-Animations-Spezialeffekte
Der HTML5 Canvas-Spezialeffekt „Herzflattern-Animation“ ist eine generierte Animation, die direkt mit einem Browser geöffnet werden kann, um ein Herz zu sehen.
Quellcode des H5-Panda-Bounce-Spiels
HTML5 Mobile Panda ist auch ein verrückter Spielquellcode. Spielbeschreibung: Halten Sie den Bildschirm gedrückt, um die Stärke der Panda-Feder anzupassen und zur Steinsäule zu springen. Das Spiel endet, wenn Sie in den Fluss fallen.
HTML5-Valentinstag-Box-Animations-Spezialeffekte
Zeichnen Sie basierend auf SVG Animationen zum Öffnen von Liebesbox-Geschenken am Valentinstag und Spezialeffekte für Liebesbox-Animationen.
Quellcode des H5 3D Rolling Ball-Spiels
HTML5 cooler 3D-Ball-Rolling-Handyspielcode herunterladen. Spieleinführung: Ein farbiger Ball rollt und die aktuelle Bahn des farbigen Balls wird durch Ziehen mit der Maus oder dem Touchscreen des Mobiltelefons gesteuert. Dies ist ein einfacher und leicht zu bedienender Quellcode für Mobilspiele.