Canvas是HTML5中的一个重要标签，它允许我们在页面上绘制2D或者3D图形。其中2D图形最为常见，我们可以利用Canvas来创造各种有趣的特效和动画，其中之一就是粒子背景效果。
实现原理
我们可以通过Canvas API中的createRadialGradient()和fillRect()方法来实现粒子背景效果。具体实现方式如下：
- 创建Canvas元素
<canvas id="particle-canvas"></canvas>
- 获取Canvas上下文
const canvas = document.getElementById('particle-canvas');
const ctx = canvas.getContext('2d');- 设置Canvas大小
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
- 定义粒子对象
-- -------------------- ---- -------
----- -------- -
-------------- -- ------- -
------ - --
------ - --
----------- - -------
---------- - ---------- ---- ---- -------------------
----------- - ------------- - - - --
----------- - ------------- - - - --
-
------ -
----------------
--------------- ------- ------------ -- ------- - ---
------------- - -----------
-----------
-
-- 绘制粒子
-- -------------------- ---- -------
----- ------------- - ---
-------- ------ -
--- ---- - - -- - - ---- ---- -
----- ------ - ------------- - - - --
----- - - ------------- - ------------- - ------ - -- - -------
----- - - ------------- - -------------- - ------ - -- - -------
---------------------- ----------- -- ---------
-
-
-------- --------- -
-------------------------------
------------- - -------- -- -- -------
--------------- -- ------------- ---------------
--- ---- - - -- - - --------------------- ---- -
------------------ -- ------------------------
------------------ -- ------------------------
-- -
------------------ - - --
------------------ - ------------ --
------------------ - - --
------------------ - -------------
- -
----------------------- ---
----
- ---- -
------------------------
-
-
-示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
---------------------------
-------
---- -
------- --
-------- --
--------- -------
-
---------------- -
--------- ---------
---- --
----- --
-
--------
-------
------
------- ------------------------------
--------
----- ------ - -------------------------------------------
----- --- - ------------------------
------------ - ------------------
------------- - -------------------
----- -------- -
-------------- -- ------- -
------ - --
------ - --
----------- - -------
---------- - ---------- ---- ---- -------------------
----------- - ------------- - - - --
----------- - ------------- - - - --
-
------ -
----------------
--------------- ------- ------------ -- ------- - ---
------------- - -----------
-----------
-
-
----- ------------- - ---
-------- ------ -
--- ---- - - -- - - ---- ---- -
----- ------ - ------------- - - - --
----- - - ------------- - ------------- - ------ - -- - -------
-----
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------