在 Web 应用程序中，画布元素是浏览器在渲染游戏时绘制图形的位置。本节介绍如何配置 Web 画布元素的可见大小以及游戏渲染的分辨率。
要配置 Web 画布大小，您必须考虑以下类型的画布大小
| 画布大小元素 | 描述 |
|---|---|
| 画布元素 CSS 大小 | 此文档对象模型 (DOM) 指定画布占据的网页上的可见区域。您可以使用 HTML 或 JavaScript 配置画布大小。 |
| WebGL 渲染目标大小 | 此大小指定 GPU 渲染游戏到的像素计算机图像中的最小单位。像素大小取决于屏幕分辨率。像素灯光在每个屏幕像素处计算。 更多信息 参见 术语表分辨率。您可以将此大小与 CSS 大小同步以提供像素完美的渲染，或者将其与 CSS 大小分离。 |
如果以上两个画布大小元素不匹配，浏览器将拉伸渲染的WebGL一个 JavaScript API，用于在 Web 浏览器中渲染 2D 和 3D 图形。Unity Web 构建选项允许 Unity 将内容发布为 JavaScript 程序，这些程序使用 HTML5 技术和 WebGL 渲染 API 在 Web 浏览器中运行 Unity 内容。 更多信息
参见 术语表输出以填充网页上的可见画布区域。
在高 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>