Heim

JS-Spezialeffekte

HTML5-Spezialeffekte

HTML5+Canvas的黑洞特效

Jetzt downloaden Vorschau

<!doctype html>
<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中文网。

Haftungsausschluss

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

Unterstützt realistische HTML5 Canvas-Tafeleffekte auf der mobilen Seite

19 Jan 2017

Dies ist ein Tafel-Spezialeffekt, der mit HTML5 Canvas erstellt wurde. Der Tafel-Spezialeffekt unterstützt Mobiltelefone. Er kann den Effekt der Verwendung von Kreide zum Schreiben auf einer Tafel simulieren. Zu den Merkmalen dieses Tafeleffekts gehören:

HTML5 Canvas realisiert die Spezialeffekte eines blühenden Feuerwerks

03 Jul 2018

Dies ist eine wunderschöne HTML5-Canvas-Animation, die die Animations-Spezialeffekte von Feuerwerkskörpern in unserem Leben simuliert. Der Effekt ist sehr realistisch. Für diejenigen, die interessiert sind kann sich darauf beziehen

Detaillierte Einführung in 7 coole HTML5 Canvas-Animationseffekte

08 Mar 2017

HTML5 ist wirklich eine hervorragende Webtechnologie, mit der Sie nicht nur Seitenelemente bequemer bearbeiten, sondern auch mehr Animationseffekte über Canvas erzielen können. Nach der Einführung des HTML5-Standards kann CSS3 eine größere Rolle spielen. In diesem Artikel werden hauptsächlich einige auf HTML5 Canvas basierende Animationsspezialeffekte vorgestellt und ich hoffe, sie gefallen Ihnen. 1. HTML5-Canvas-Wasserfallanimation, superrealistisch Dies ist eine sehr realistische HTML5-Wasserfallanimation, die auf Canvas basiert, und der Effekt ist ziemlich cool. Online-Demo-Quellcode-Download 2. HTML5 Canvas-Farbe.

Spezialeffekte für Textanimationen basierend auf HTML5 Canvas

02 Apr 2018

Dieser Artikel teilt Ihnen die auf HTML5 Canvas basierenden Textanimations-Spezialeffekte mit. Es ist sehr nützlich, dass Freunde es als Referenz verwenden können.

Realistisches Feuerwerks-Spezialeffekt-Plug-in basierend auf HTML5-Canvas

18 Jan 2017

jquery-fireworks ist ein jQuery-Plug-in für realistische Feuerwerks-Spezialeffekte auf Basis von HTML5 Canvas. Das Plugin ist einfach zu bedienen und frei konfigurierbar. Es kann realistische Feuerwerkseffekte in einem Div-Container erzeugen.

HTML5 Canvas-Spezialeffekte für mobile Verlosungen

18 Jan 2017

Dies ist ein Spezialeffekt für die Verlosung, der auf JQuery und HTML5 Canvas basiert. Der Glückspreis-Spezialeffekt unterstützt mobile Endgeräte. Er generiert eine Hauptpreisscheibe durch dynamisches Erstellen von Canvas-Elementen und erhält zufällige Preise über JQuery-Code.

Einführung in die Wirkung von JavaScript+HTML5-Canvas-Zeichnungsschurken

03 Jul 2018

In diesem Artikel wird hauptsächlich der Schurkeneffekt von JavaScript + HTML5-Leinwandzeichnungen vorgestellt, bei dem JavaScript mit HTML5-Leinwandgrafikzeichnungen und zufälligen Farbfülltechniken kombiniert wird

Laden von Animationsspezialeffekten basierend auf HTML5 Canvas- und Rebound-Animationen

19 Jan 2017

Dies ist ein Ladeanimations-Spezialeffekt, der auf der HTML5-Canvas- und Rebound-Animation basiert. Die Ladeanimation verwendet eine Leinwand, die die gesamte Seite abdeckt, und zeigt einen polygonalen Lader an, der den Ladefortschritt darstellt.

HTML5 Canvas implementiert Feuerwerks-Spezialeffekte. HTML5-Tutorial-Fähigkeiten

16 May 2016

Dies ist eine wunderschöne HTML5-Canvas-Animation. Sie simuliert die Animations-Spezialeffekte von Feuerwerkskörpern in unserem Leben. Der Effekt ist sehr realistisch. Für diejenigen, die interessiert sind beziehen Sie sich darauf

See all articles