<頭>
<元字符集=“utf-8”>


<風格>
帆布 {＃＃＃ ? 位置：絕對；
? 頂部：0;
? 左：0；
}
</風格>

</頭>
<正文>



<腳本>
讓 w = c.width = window.innerWidth;
讓 h = c.height = window.innerHeight;

const ctx = c.getContext('2d');
常量選項 = {
? ? 十六進制長度：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;

數(shù)學.TAU = 6.28318530717958647692;

常量頂點 = [];
頂點類 {
? 構造函數(shù)({ 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: 勾選 });
? ? 常量參數(shù) = {?
? ? ? len: this.len,
? ? ? 拉德：這個.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.中風();
? }
??
? 靜態(tài)生成（）{
? ? 頂點.長度 = 0;?
? ? const hexCos = Math.cos(Math.TAU / 12) * opts.hexLength;
? ? const hexSin = Math.sin(Math.TAU / 12) * opts.hexLength;

??
? ? 讓alternanceX = false;
? ? for(令 x = 0; x < w; x += hexCos) {
? ? ? 讓alternance = alternanceX = !alternanceX;
? ? ? for(let y = 0; y < h; y += hexSin + opts.hexLength) {
? ? ? ? 交替 = !交替;
? ? ? ? 頂點.push(新頂點({
? ? ? ? ? x: x - w / 2,
? ? ? ? ? y: y + 交替 * hexSin - h / 2
? ? ? ? }))
? ? ? }
? ? }
? ??
? }
}

頂點.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);
}
動畫（）；

window.addEventListener('調整大小', () => {
? w = c.width = window.innerWidth;
? h = c.height = window.innerHeight;
??
? 頂點.gen();
? 勾選= 0;
? ctx.fillStyle = '#222';
? ctx.fillRect(0, 0, w, h);
})
</腳本>

</body>

</html>

這是一個HTML5+Canvas的特效，需要的朋友可以直接下載使用，更多特效代碼盡在PHP中文網(wǎng)。