PM 說: 很常在網頁上看到線條粒子特效的背景是哪個套件?

2024 iThome 鐵人賽

DAY 24

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 24 篇

16th鐵人賽

YUAN

2024-09-21 11:51:03

644 瀏覽

分享至

前言

不知道讀者們有沒有逛網站or部落格看到封面圖的效果
關鍵字: 網頁粒子特效

比較知名的套件叫做: particles.js
提供了多種粒子效果
github: https://github.com/VincentGarreau/particles.js/

但我們今天只要做出 封面圖=>Nest 特效
使用的套件是: canvas-nest
https://github.com/hustcc/canvas-nest.js/tree/master

成果

canvas-nest_demo

重點

語法

//第一個是DOM元素, 第二個是參數設定
new CanvasNest(area, config)

p.s: count是指畫面要渲染幾個點(點會連成線)，太多會很卡頓

邏輯
那canvas是怎麼做出這樣的效果呢?
先把功能拆細列出來

畫很多圓圈(座標隨機)
if在一定半徑，2個圓圈要畫線連接
讓圓圈做位移(加速度隨機)
監聽滑鼠座標
圓圈要固定在滑鼠附近(固定半徑內)
if圓圈碰到牆壁，要反彈(變更加速度)

那程式碼是怎麼讓圓圈動起來?
ANS:和我們看電影&動畫概念很像逐幀渲染 => 快速計算出圈圈的座標 => 每秒渲染多次讓畫面動起來

requestAnimationFrame

每隔一段時間渲染其實直覺會想到 setInterval()
but...會有掉幀(卡卡)的問題，這個牽扯到螢幕渲染的機制
所以發明了requestAnimationFrame 語法

只有一個參數: 做渲染動作function

//假設要渲染的方法叫做 draw(), 用法如下
window.requestAnimationFrame(draw);

程式碼

<!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>