ホームページ

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

ストリップタグ以外の HTML 特殊文字コードを効果的に削除するにはどうすればよいですか?

18 Oct 2024

効果的な HTML 特殊文字の削除:strip_tags を超えた拡張strip_tags は HTML タグを効果的に削除しますが、HTML 特殊文字コードが残る可能性があります。「」や「©」などのコードは、RSS フィードファイルの保存を中断する可能性があります。

タオバオの検索バーに入力すると、同じ名前の特殊効果を作成する方法が表示されます

13 Jun 2016

淘宝網の検索バーの入力プロンプトに関連する同じ名前の特殊効果はどのように作成されますか? これは、フォーラムの専門家がどのように行うのかを知りません。ヒントを教えてください。もっと知りたいだけです。-----解決策のアイデア----------それは ajax かもしれません。 ---解決策のアイデア------------- -------------http://www.shangxueba.com/jingya