画布调整大小而不会丢失性能

Question

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

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

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

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

确实有效。整个画布及其所有孩子都被调整大小并保持其相对位置。

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

Answer 1

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

这样做

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

可以为您提供更好的表现，它可以让您的游戏看起来更好。