ホームページ

JS特殊効果

html5特殊効果

HTML5+Canvasのブラックホール特殊効果

ダウンロード中プレビュー

<!doctype html>
<html>
<頭>
<メタ文字セット="utf-8">
<title>不要失去你的彩虹</title>

<スタイル>
キャンバス {＃＃＃位置: 絶対;
上: 0;
左: 0;
}
</style>

</head>
<本文>

<canvas id=c></canvas>

<スクリプト>
w = c.width = window.innerWidth;
とします。 h = c.height = window.innerHeight;
とします。
const ctx = c.getContext('2d');
const オプション = {
hex長さ: 30,
lenFn: ({ len, t }) =>
len Math.sin(t),
radFn: ({ rad, len, t, 興奮 }) =>
rad (興奮 opts.propFn({ len, t }))*2 / 4,
propFn: ({ len, t }) =>
len / opts.hexLength / 10 - t,
興奮Fn: ({ len, t }) =>
Math.sin(opts.propFn({ len, t }))**2,
colorFn: ({ rad, 興奮, t }) =>
`hsl(${rad / Math.TAU * 360 t}, ${興奮 * 100}%, ${20 興奮 * 50}%)`,
タイムステップ: .01,
ランダムジグ: 8,

リペイントカラー: 'rgba(0,0,0,.1)'
};
ティック = 0;
にします
Math.TAU = 6.28318530717958647692;

const 頂点 = [];
クラス頂点 {
コンストラクター({ 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 };
}

ステップ（） {＃＃＃ const 興奮 = opts.excitementFn({ len: this.len, t: Nick });
const param = {
レン: this.len,
rad: this.rad,
t: チェックマーク、
興奮＃＃＃ };
const nextLen = opts.lenFn(param);
const nextRad = opts.radFn(param);
const color = opts.colorFn(param);

ctx.ストロークスタイル = カラー;
ctx.lineWidth = 興奮 .2;
ctx.beginPath();
ctx.moveTo(this.prevPoint.x, this.prevPoint.y);
this.prevPoint.x = nextLen * Math.cos(nextRad)
Math.random() * (1-興奮)**2 * opts.randomJig * 2 - opts.randomJig;
this.prevPoint.y = nextLen * Math.sin(nextRad)
Math.random() * (1-興奮)**2 * opts.randomJig * 2 - opts.randomJig;
ctx.lineTo(this.prevPoint.x, this.prevPoint.y);
ctx.ストローク();
}

静的gen() {
頂点の長さ = 0;
const hexCos = Math.cos(Math.TAU / 12) * opts.hexLength;
const hexSin = Math.sin(Math.TAU / 12) * opts.hexLength;

alternanceX = false;
にします for(let x = 0; x < w; x = hexCos) {
オルタナンス = オルタナンス X = !オルタナンス X;
とします。 for(let y = 0; y < h; y = hexSin opts.hexLength) {
オルタナンス = !オルタナンス;
頂点.push(新しい頂点({
x: x - w / 2,
y: y 交互 * hexSin - h / 2
}))
}
}

}
}

Vertex.gen();

ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
const anim = () => {
window.requestAnimationFrame(anim);

ティック = 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();
ティック = 0;
ctx.fillStyle = '#222';
ctx.fillRect(0, 0, w, h);
})
</スクリプト>

</本文>

</html>

これは HTML5 Canvas のセキュリティ機能であり、必要な友人は直接ダウンロードして使用でき、より有効なコードは PHP 中文ウェブ上にあります。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn