如何使用 JavaScript 将画布全屏

当我们需要在浏览器中显示绘图或动画时，使用画布（Canvas）是一种常见的选择。但是，默认情况下，画布只会占据页面中的一部分区域。本文将介绍如何使用 JavaScript 将画布全屏。

步骤

1. 获取画布元素

首先，我们需要获取画布元素。可以使用 document.getElementById() 方法获取具有特定 ID 的元素。如果没有设置 ID，则可以使用 document.querySelector() 选择器方法。

const canvas = document.getElementById('my-canvas');

2. 设置画布尺寸

接下来，我们需要设置画布的尺寸。通常，将画布的宽度和高度设置为窗口的宽度和高度是最好的选择。

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

3. 监听窗口大小变化事件

由于用户可以随时更改窗口大小，因此我们需要监听窗口大小变化事件，并相应地更新画布大小。

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

4. 绘制内容

最后，我们可以在画布上绘制所需的内容。请注意，这一步与将画布全屏无关。

const ctx = canvas.getContext('2d');

// 在画布上绘制一个矩形
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

示例代码

-- -------------------- ---- -------
--------- -----
------
------
  ------------------ --------------
  -------
    ---- -
      ------- --
      -------- --
      --------- -------
    -
    ------ -
      -------- ------
    -
  --------
-------
------
  ------- ------------------------
  --------
    ----- ------ - -------------------------------------
    ------------ - ------------------
    ------------- - -------------------
    
    --------------------------------- -- -- -
      ------------ - ------------------
      ------------- - -------------------
    ---
    
    ----- --- - ------------------------
    ------------- - ------
    --------------- -- ------------- ---------------
  ---------
-------
-------

总结

使用上述步骤，我们可以将画布全屏，并在其中绘制所需的内容。请注意，在设置画布尺寸时，必须将其与窗口大小保持同步，并在窗口大小变化时更新它。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15341