HTML5+Canvas的黑洞特效

<頭>
<元字符集=“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;

數學.TAU = 6.28318530717958647692;

常量頂點 = [];
頂點類別 {
建構子({ 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: tick });
常數參數 = { 
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.中風();
}

靜態生成（）{
頂點.長度 = 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中文網。