文档

Unity Engine

User Manual

Script Reference

Unity Engine

配置 Web 画布大小

Configure the visible size of the Web canvas element.
阅读时间3 分钟最后更新于 1 个月前
在 Web 应用程序中，画布元素是浏览器在渲染游戏时绘制图形的位置。本节介绍如何配置 Web 画布元素的可见大小以及游戏渲染到的分辨率。
要配置 Web 画布大小，必须考虑以下类型的画布大小：

画布大小元素

描述

画布元素 CSS 大小此文档对象模型 (DOM) 指定画布在网页上占据的可见区域。可使用 HTML 或 JavaScript 配置画布大小。
WebGL 渲染目标大小此大小指定 GPU 将游戏渲染到的像素分辨率。您可以将此大小与 CSS 大小同步进行管理，以提供像素完美的渲染，也可以将其与 CSS 大小分离。
如果以上两个画布大小元素不匹配，浏览器将拉伸渲染的 WebGL 输出以填充网页上的可见画布区域。

分离渲染分辨率

在高 DPI 显示屏上实现缩小的低 DPI（每英寸点数）渲染时，分离渲染分辨率非常有用。这不仅有助于节省 GPU 填充率功耗，而且在应用程序对渲染分辨率敏感时会有帮助。例如，如果应用程序逻辑使用屏幕空间像素单位，但要使应用程序本身正常工作，则需要特定的分辨率。
默认情况下，Unity 使画布元素 CSS 大小和 WebGL 渲染目标大小保持同步，并提供 1:1 像素的完美渲染。如果 JavaScript 中的网页修改了画布 CSS 大小，Unity 将自动调整 WebGL 渲染目标大小以匹配它。默认情况下，此匹配用于实现高 DPI 渲染。

覆盖 DPI 比例

如果要覆盖 DPI 比例，请打开 
index.html
文件并添加 Unity 实例配置变量 
devicePixelRatio=<double>
。例如，在网站模板页面上设置 
devicePixelRatio=1
将强制 Unity 始终应用低 DPI 渲染。请参阅 Web 模板构建配置和交互以查看示例。

手动更改 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>