不知道讀者們有沒有逛網站or部落格看到封面圖的效果
關鍵字: 網頁粒子特效
比較知名的套件叫做: particles.js
提供了多種粒子效果
github: https://github.com/VincentGarreau/particles.js/
但我們今天只要做出 封面圖
=>Nest 特效
使用的套件是: canvas-nest
https://github.com/hustcc/canvas-nest.js/tree/master
//第一個是DOM元素, 第二個是參數設定
new CanvasNest(area, config)
p.s: count是指畫面要渲染幾個點(點會連成線),太多會很卡頓
那程式碼是怎麼讓圓圈動起來?
ANS:和我們看電影&動畫概念很像逐幀渲染 => 快速計算出圈圈的座標 => 每秒渲染多次讓畫面動起來
每隔一段時間渲染其實直覺會想到 setInterval()
but...會有掉幀(卡卡)的問題,這個牽扯到螢幕渲染的機制
所以發明了requestAnimationFrame 語法
只有一個參數: 做渲染動作function
//假設要渲染的方法叫做 draw(), 用法如下
window.requestAnimationFrame(draw);
推薦閱讀: 那些被忽略但很好用的 Web API / RequestAnimationFrame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CanvasNest</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
#area-render {
/* position: fixed; */
height: 98.5%;
width: 99dvw;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="area-render">
<h2>Hello, World!</h2>
</div>
<script src="https://git.hust.cc/canvas-nest.js/dist/canvas-nest.umd.js"></script>
<script>
const config = {
color: "0,0,255",
pointColor: "0,0,255",
opacity: 1,
zIndex: -2,
// 不要超過 1000 =>很卡
count: 200,
};
const area = document.getElementById("area-render");
const cn = new CanvasNest(area, config);
console.log(cn);
</script>
</body>
</html>
https://github.com/sunshine940326/canvas-nest?tab=readme-ov-file
https://github.com/jc1144096387/canvas_nest/blob/master/test-clear.js
https://github.com/hustcc/canvas-nest.js/tree/master?tab=readme-ov-file#configuration