我正在开发一款网页游戏，出于性能原因，我想以特定分辨率（假设为 640x480）渲染 UI 并将其放大（就像处理图像一样）。一些变换和背景效果需要相当多的回流/重绘，对于体验来说，以 4K 分辨率渲染这些并不重要。
但是我注意到，例如，当我在父容器上使用scale(2)时，字体、阴影和背景渐变只是以分辨率x2渲染，而不是以x1渲染它们并将其结果缩放x2（就像我能够做的那样）画布的内容）。我尝试在 iframe 中渲染它并将该 iframe 缩放 x2，但这仍然导致 UI 以 x2 分辨率渲染。
有谁知道实现这一目标的方法吗？
编辑：工作示例
<html>
<head>
<meta name="viewport" content="width=320px, height=240px, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background: black;
width: 100vw;
height: 100vh;
}
#iframed {
width: 320px;
height: 200px;
}
#scaled-game {
text-rendering: optimizeSpeed;
font-smooth: never;
backface-visibility: hidden;
will-change: transform;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) scale(2);
}
</style>
</head>
<body>
<div id="scaled-game">
<iframe
id="iframed"
scrolling="no"
frameborder="no"
allow="autoplay"
width="320px"
height="200px"
allowfullscreen
srcdoc='
<html>
<style>
body {
background: black;
text-rendering: optimizeSpeed;
font-smooth: never;
backface-visibility: hidden;
}
#game {
position: absolute;
will-change: background-position;
min-width: 320px;
width: 320px;
max-width: 320px;
min-height: 200px;
height: 200px;
max-height: 200px;
border: none;
filter: drop-shadow(0px 0px 4px green) drop-shadow(0px 0px 6px darkgreen);
}
#gui {
position: absolute;
}
#txt {
top: 0;
transform: translate(0%, 50%);
font-size: 25px;
text-align: center;
color: white;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}
#game:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transform: translateZ(0);
transform: translateZ(0);
transform-origin: 50% 50% 0;
animation-name: sideupscroll;
animation-duration: 80s;
animation-timing-function: linear;
animation-iteration-count: infinite;
background: url("http://i.imgur.com/wNna7D3.png") repeat fixed 0 0 indigo;
animation-fill-mode: both;
border: 2px solid white;
border-radius: 7px;
}
@keyframes sideupscroll {
0% {
background-position: 0 0;
}
50% {
background-position: -50% -100%;
}
100% {
background-position: -100% -200%;
}
}
</style>
<body>
<div id="game">
</div>
<div id="gui">
<p id="txt">TEXT & SHADOWS KEEP BEING SHARP</p>
</div>
</body>
</html>
'>
</iframe>
</div>
</body>
</html>您实现了您想要实现的目标：升级版本确实需要更少的 GPU 内存。文本、边框、阴影等内容可以在不损失质量的情况下进行缩放。它们本质上是矢量化的。然而，放大的图像（和背景图像）确实变得模糊。
我用半透明的黑色覆盖层做了类似的事情。我没有创建 100%/100% div，而是创建了 1%/1% div 并将其放大以填充整个屏幕（使用变换）。它有效 - 并且节省的内存可以在开发工具中测量。