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
Wozu dient HTML5-Canvas? Detaillierte Erläuterung des neuesten Canvas-Elements von HTML5
13 Aug 2018
In diesem Artikel geht es hauptsächlich um das neueste Canvas-Element von HTML5
Beispieldetails des praktischen Scratch-Effekts von HTML5 Canvas
30 Mar 2017
Aufgrund der besseren Unterstützung von HTML5 auf Mobilgeräten gibt es in den letzten Jahren häufig Aktivitäten, die Rubbeleffekte verwenden. In letzter Zeit habe ich mir auch H5-Inhalte angesehen, daher habe ich selbst einen implementiert und werde ihn jetzt mit anderen teilen alle.
Beispielcode-Analyse von Html5 Canvas zur Implementierung des Doudizhu-Spiels
21 Mar 2017
Nachdem ich nun etwas über HTML5- und Canvas-bezogenes Wissen und die Demo von Doudizhu gelesen hatte, habe ich versucht, ein Doudizhu mit den Materialien in der Demo zu schreiben. Ich begrüße Ihren Rat nicht.
16 May 2016
In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung von Layered Canvas zur Optimierung des HTML5-Renderings vorgestellt. Es stammt aus der technischen Dokumentation des Entwicklers auf der offiziellen Website von IBM.
16 May 2016
Das Canvas-Element von HTML5 verwendet JavaScript, um Bilder auf einer Webseite zu zeichnen. Die Leinwand ist ein rechteckiger Bereich, in dem Sie jedes Pixel steuern können. Canvas bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern.
16 May 2016
In diesem Artikel wird hauptsächlich die Verwendung von Cache zur Optimierung der Leistung des HTML5-Canvas-Programms vorgestellt. Der Autor vergleicht die Leistungsverbesserung des Originalprogramms nach der Verwendung von Cache und Canvas außerhalb des Bildschirms.
Detaillierte Einführung von 20 wunderschönen HTML5/CSS3-Anwendungs-Plug-Ins (Bilder)
09 Mar 2017
Auf HTML5 basierende Anwendungen sind mittlerweile sehr weit verbreitet. Heute stellen wir Ihnen 20 wunderschöne HTML5/CSS3-Anwendungs-Plug-ins vor. Ich hoffe, es gefällt euch allen und teilt es mit euren Freunden. 1. Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos, starke visuelle Wirkung Es gibt viele HTML5-Video-Spezialeffekte, aber diese Spezialeffekte für die Fragmentierung und Neuorganisation von HTML5-Videos sind sehr aufregend und verleihen den Menschen eine starke visuelle Wirkung. Klicken Sie auf eine beliebige Stelle im Video, und HTML5 zerlegt diese Bereiche. Nach einer Weile werden diese zerbrochenen Videofragmente automatisch wieder zusammengesetzt. Es ist ein sehr gutes HTML5-Video.
Detaillierte Erläuterung des Grafikcodes von Html5 Canvas Image (1)
28 Mar 2017
Die von Canvas unterstützte Bild-API ist sehr leistungsfähig; wir können Bilder direkt laden und auf Canvas anzeigen, und wir können auch alle für die Anzeige erforderlichen Bildteile ausschneiden und zusammenfügen;
Detaillierte Erläuterung des Grafikcodes von Html5 Canvas Image (2)
28 Mar 2017
In diesem Artikel verwenden wir die von Canvas bereitgestellte Bild-API und Transformation, um einige Beispiele zu implementieren: einfache Bewegung des Autos, einfache Spielkarte sowie Schwenken und Zoomen des Bildes;
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.