包含此页的版本：
不含此页的版本：
在 Web 应用程序中，画布元素是浏览器在渲染游戏时绘制图形的位置。本节介绍如何配置 Web 画布元素的可见大小，以及游戏呈现的分辨率。
要配置 Web 画布大小，您必须考虑以下类型的画布大小：
| 画布大小元素 | 描述 |
|---|---|
| 画布元素 CSS 大小 | 此文档对象模型 （DOM） 指定画布在网页上占据的可见区域。您可以使用 HTML 或 JavaScript 配置画布大小。 |
| WebGL 渲染目标大小 | 此大小指定像素计算机图像中的最小单位。像素大小取决于您的屏幕分辨率。像素光照是在每个屏幕像素下计算的。更多信息 请参阅术语表GPU 将游戏渲染到的分辨率。您可以与 CSS 大小同步管理此大小，以提供像素完美的渲染，或将其与 CSS 大小分离。 |
如果上述两个画布大小元素不匹配，浏览器将拉伸渲染的WebGL一种在 Web 浏览器中呈现 2D 和 3D 图形的 JavaScript API。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 模板构建配置和交互。
要手动配置画布大小，您必须首先禁用自动大小同步。为此，请在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>