当我们需要在浏览器中显示绘图或动画时，使用画布（Canvas）是一种常见的选择。但是，默认情况下，画布只会占据页面中的一部分区域。本文将介绍如何使用 JavaScript 将画布全屏。
步骤
1. 获取画布元素
首先，我们需要获取画布元素。可以使用 document.getElementById() 方法获取具有特定 ID 的元素。如果没有设置 ID，则可以使用 document.querySelector() 选择器方法。
----- ------ - -------------------------------------
2. 设置画布尺寸
接下来，我们需要设置画布的尺寸。通常，将画布的宽度和高度设置为窗口的宽度和高度是最好的选择。
------------ - ------------------ ------------- - -------------------
3. 监听窗口大小变化事件
由于用户可以随时更改窗口大小，因此我们需要监听窗口大小变化事件，并相应地更新画布大小。
--------------------------------- -- -- - ------------ - ------------------ ------------- - ------------------- ---
4. 绘制内容
最后，我们可以在画布上绘制所需的内容。请注意，这一步与将画布全屏无关。
----- --- - ------------------------ -- ---------- ------------- - ------ --------------- -- ------------- ---------------
示例代码
--------- -----
------
------
------------------ --------------
-------
---- -
------- --
-------- --
--------- -------
-
------ -
-------- ------
-
--------
-------
------
------- ------------------------
--------
----- ------ - -------------------------------------
------------ - ------------------
------------- - -------------------
--------------------------------- -- -- -
------------ - ------------------
------------- - -------------------
---
----- --- - ------------------------
------------- - ------
--------------- -- ------------- ---------------
---------
-------
-------总结
使用上述步骤，我们可以将画布全屏，并在其中绘制所需的内容。请注意，在设置画布尺寸时，必须将其与窗口大小保持同步，并在窗口大小变化时更新它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/15341