前端问答：如何用 JavaScript 让 HTML Canvas 全屏显示

今天要跟大家分享一个非常实用的小技巧，适合那些正在学习前端开发的朋友们。你是不是也遇到过这样的问题：在制作一些网页小游戏、炫酷的网页动画或者数据可视化时，想让画布（Canvas）全屏显示，让用户的体验更加沉浸？

今天我们来聊聊如何用 JavaScript 让 HTML 中的 Canvas 画布全屏显示，做到页面随便怎么调整大小，画布都能完美适应整个窗口。

我们以开发一个简单的全屏小游戏为例子。比如，你正在制作一个小型的网页打砖块游戏，想要让游戏画布覆盖整个浏览器窗口，这样用户体验会更好，也更符合现代网页游戏的需求。

第一步：创建 Canvas 画布

首先，我们需要在 HTML 中放置一个 Canvas 元素，这个元素将承载我们的游戏画面：

<canvas id="gameCanvas" style="border:1px solid #000;"></canvas>

这里我们给 Canvas 加了一个简单的边框，方便调试时看清楚它的位置。接下来要做的就是用 JavaScript 控制它的大小。

第二步：让 Canvas 自动全屏

为了让 Canvas 全屏显示，我们需要在页面加载时动态设置它的宽度和高度为浏览器窗口的大小。而且，用户调整窗口大小时，画布也要跟着变化。来看看代码：

// 选择我们的游戏画布
const canvas = document.getElementById('gameCanvas');

// 定义一个让 Canvas 全屏的函数
const setCanvasFullScreen = () => {
  canvas.width = window.innerWidth;   // 设置画布宽度为窗口宽度
  canvas.height = window.innerHeight; // 设置画布高度为窗口高度
  // 这里你还可以根据全屏尺寸重新初始化游戏元素，比如砖块位置、球的速度等
};

// 页面一加载就让 Canvas 全屏
setCanvasFullScreen();

// 当窗口大小变化时，画布也跟着变化
window.addEventListener('resize', setCanvasFullScreen);

第三步：代码解读

我们一步一步来拆解这段代码，让你轻松搞懂它在干什么：

获取 Canvas 元素：用 document.getElementById('gameCanvas') 获取到我们在 HTML 里创建的 Canvas。这个画布是我们后续操作的对象。
定义全屏函数：setCanvasFullScreen 是一个自定义函数，专门用来让 Canvas 全屏的。我们通过 canvas.width = window.innerWidth 设置 Canvas 的宽度为浏览器窗口的宽度，canvas.height = window.innerHeight 设置高度为窗口的高度。这就确保了画布占满整个页面的可视区域。
页面加载时设置全屏：setCanvasFullScreen() 这行代码是在页面刚加载时就让 Canvas 全屏的，不需要用户手动调整。
监听窗口大小变化：我们用 window.addEventListener('resize', setCanvasFullScreen) 来监听浏览器窗口的大小变化。每当窗口被调整，setCanvasFullScreen 函数就会再次运行，确保画布随时都是全屏状态。

实际场景中的应用

想象一下，当你开发一个小游戏，玩家打开网页时，整个画面就会无缝地适应他的屏幕，游戏体验更佳。而且在这个过程中，不论玩家如何调整窗口大小，游戏画布始终都能覆盖整个窗口区域，游戏内容不会被压缩或者扭曲。

除了游戏，像是一些数据可视化的仪表盘、互动性强的动画网页等，都可以用到这种全屏 Canvas 的效果。比如一个全屏的数据图表，随着窗口大小的调整，图表的内容也自动跟随变化，不会让用户觉得布局混乱。

小提示

性能优化：如果你的应用需要频繁调整 Canvas 的内容（比如动画、复杂绘图等），在窗口大小变化时进行 Canvas 重新绘制时要小心性能问题，建议对动画等进行适当的优化处理。
多设备适配：在移动设备上，全屏 Canvas 也是不错的选择，但注意可能会遇到软键盘弹出或者横竖屏切换的情况，需要额外处理这些变化。