调整画布大小而不损失性能答案

【问题标题】：Canvas resizing without performance loss调整画布大小而不损失性能
【发布时间】：2014-07-21 08:23:22
【问题描述】：

我使用 HTML5 制作了一个应用程序，所有内容都在 CANVAS 标记中。

画布为 1024x768 像素。让它保持这样，它将获得 60 FPS（启用 webgl）。

但是，为了使其适合每部手机，我在代码中添加了以下内容：

$('#canvas').css('width','100%');
$('#canvas').css('height','100%');

确实有效。调整整个画布及其所有子项的大小并保持它们的相对位置。

问题是它使我的应用程序非常慢。因此，我很容易失去 20 FPS。我怎样才能以正确的方式做到这一点？

【问题讨论】：

您可以尝试将画布包装在宽度和高度为 100% 的 div 中，准备好文档上其父 div 的宽度和高度并调整大小，并将画布的宽度和高度设置为相同像素值。如果是百分比让事情变慢，那应该可以解决问题。
@Kylok : 百分比在设置时计算一次。

【解决方案1】：

您可能想尝试设置画布的宽度和高度属性。在 CSS 中更改宽度和高度不会更改画布中的像素数，它只会拉伸画布。

所以做类似的事情

//Compute the correct width and height somewhere.
$("#canvas").attr("width", computedWidth);
$("#canvas").attr("height", computedLength);

可能会给你带来更好的性能，它应该让你的游戏看起来更好。

【讨论】：