在 Web 应用程序中，画布元素是浏览器在渲染游戏时绘制图形的位置。本节介绍如何配置 Web 画布元素的可见大小以及游戏渲染到的分辨率。
要配置 Web 画布大小，必须考虑以下类型的画布大小：
| 画布大小元素 | 描述 |
|---|---|
| 画布元素 CSS 大小 | 此文档对象模型 (DOM) 指定画布在网页上占据的可见区域。可使用 HTML 或 JavaScript 配置画布大小。 |
| WebGL 渲染目标大小 | 此大小指定 GPU 将游戏渲染到的像素分辨率。您可以将此大小与 CSS 大小同步进行管理，以提供像素完美的渲染，也可以将其与 CSS 大小分离。 |
如果以上两个画布大小元素不匹配，浏览器将拉伸渲染的__ WebGL__一款 JavaScript API，可在 Web 浏览器中渲染 2D 和 3D 图形。Unity WebGL 构建选项让 Unity 能够将内容发布为 JavaScript 程序，而这些程序会使用 HTML5 技术和 WebGL 渲染 API 在 Web 浏览器中运行 Unity 内容。更多信息
See in Glossary 输出以填充网页上的可见画布区域。
在高 DPI 显示屏上实现缩小的低 DPI（每英寸点数）渲染时，分离渲染分辨率非常有用。这不仅有助于节省 GPU 填充率功耗，而且在应用程序对渲染分辨率敏感时会有帮助。例如，如果应用程序逻辑使用屏幕空间像素单位，但要使应用程序本身正常工作，则需要特定的分辨率。
默认情况下，Unity 使画布元素 CSS 大小和 WebGL 渲染目标大小保持同步，并提供 1:1 像素的完美渲染。如果 JavaScript 中的网页修改了画布 CSS 大小，Unity 将自动调整 WebGL 渲染目标大小以匹配它。默认情况下，此匹配用于实现高 DPI 渲染。
如果要覆盖 DPI 比例，请打开 index.html 文件并添加 Unity 实例配置变量 devicePixelRatio=<double>。例如，在网站模板页面上设置 devicePixelRatio=1 将强制 Unity 始终应用低 DPI 渲染。请参阅 Web 模板构建配置和交互以查看示例。
要手动配置画布大小，必须首先禁用自动大小同步。为此，请在 Web 模板的 index.html 文件中将 Unity 实例配置变量设置为 false：matchWebGLToCanvasSize=false。设置此属性后，Unity 将保持画布的渲染目标大小不变，但如果需要，可以随时配置大小。
例如，要更改画布的 CSS 大小，请在 index.html 文件中编辑以下文本：
<div id="unity-container" style="position: absolute; width: 100%; height: 100%">
<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: 100%; height: 100%"></canvas>
</div>