在前端开发中，我们通常会使用 CSS 来设置背景。但是随着 HTML5 的出现，Canvas 成为了一个非常强大的绘图工具。Canvas 可以通过 JavaScript 绘制各种形状和图像，并且可以实现动画效果。
在本文中，我们将探讨如何使用 Canvas 来替代 CSS 背景，并且展示一些有趣的效果。
Canvas 基础
在开始之前，我们需要了解一些 Canvas 的基础知识。Canvas 是一个 HTML 元素，可以通过 JavaScript 获取并操作。我们可以使用 Canvas 的 2D 上下文（context）来绘制图形和图像。
下面是一个简单的 Canvas 示例代码，它创建了一个 500x500 的 Canvas 元素，并绘制了一个红色矩形：
-- -------------------- ---- ------- ------- ------------- ----------- ---------------------- -------- ----- ------ - ------------------------------------ ----- --- - ------------------------ ------------- - ------ --------------- -- ---- ----- ---------
我们首先获取了 Canvas 元素，并使用 getContext 方法获取了 2D 上下文对象 ctx。然后，我们设置了填充颜色为红色，并使用 fillRect 方法绘制了一个矩形。
替代 CSS 背景
使用 Canvas 替代 CSS 背景非常容易。我们可以使用 CSS 来隐藏原有的背景，并在 Canvas 中绘制我们想要的内容。
下面是一个示例代码，它创建了一个 500x500 的 Canvas 元素，并将其作为页面的背景。我们使用 setInterval 方法每隔一段时间重新绘制 Canvas，从而实现动画效果：
-- -------------------- ---- -------
-------
---- -
------- --
-------- --
--------- -------
-
------ -
--------- ------
---- --
----- --
-------- ---
-
--------
------- ------------- ----------- ----------------------
--------
----- ------ - ------------------------------------
----- --- - ------------------------
-------- ------ -
-- ----
------------- - --------
--------------- -- ---- -----
-- ----
----------------
------------ ---- ---- -- - - ---------
------------- - --------
-----------
-
----------------- ----
---------我们首先使用 CSS 设置了 body 元素的样式，将其内边距和外边距设为 0，并将溢出隐藏。然后，我们设置了 Canvas 元素的样式，将其定位到页面左上角，并将其层级设为 -1，使其成为了页面的背景。
接下来，在 JavaScript 中定义了一个 draw 函数，用于绘制 Canvas 中的内容。我们首先使用 fillRect 方法绘制了一个黑色背景，然后使用 arc 方法绘制了一个白色圆形。最后，我们使用 setInterval 方法每隔 50 毫秒调用一次 draw 函数，从而实现动画效果。
总结
在本文中，我们介绍了如何使用 Canvas 来替代 CSS 背景。通过 Canvas，我们可以实现更加复杂和有趣的背景效果，并且可以实现各种动画效果。希望这篇文章能够帮助您学习和掌握 Canvas 的基础知识，并且能够在实际开发中应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14913