HTML5：调整画布大小

Question

一直以来，我都在开发一款分辨率为800x480（流行手机分辨率）的应用程序。

我的画布HTML：

<canvas id="main" width="800" height="480">

现在，为了使其全屏显示其他分辨率，我在调整大小事件后执行以下操作：

$('#main').css('height', window.innerHeight);
$('#main').css('width', window.innerWidth);

这是可行的，但问题是我不能以这种方式保持纵横比。800x480是4:3，但是如果我在5:3的手机上运行这个应用程序，有些东西（尤其是圆圈）看起来会被拉伸。

有没有什么方法可以让它在所有分辨率下看起来都很好，而不必为每个纵横比创建一组独特的图像和代码？

Answer 1

您可以将@media用于不同的分辨率，例如平板电脑和手机

@media only screen and (max-device-width : 640px) {
/* Styles */
}

Answer 2

CSS属性宽度和高度拉伸画布，为了缩放电路板，您必须使用. attr而不是. css，这将起作用，但是，需要注意的是：

如果你想让画布在手机上看起来也很完美，你必须注意窗口。devicePixelRatio。

MDN：

devicePixelRatio属性返回当前显示中物理像素与设备无关像素之间的比率。

这是什么意思？它意味着一个设备在一个物理像素中显示多少像素。

如果设备的像素比为2，则表示在单个物理像素中绘制两个图形像素。

为了使画布看起来完美，您必须执行以下技巧：

将画布的宽度和高度设置为所需的量乘以devicePixelRatio，即

$('canvas').attr({
  'width': window.innerWidth*devicePixelRatio,
  'height': window.innerHeight*devicePixelRatio
});

然后，使用CSS缩小画布：

$('canvas').css({
  'width': window.innerWidth + 'px',
  'height': window.innerHeight + 'px'
});

它似乎innerWidth和innerHeight一开始是不正确的，我试图包装代码在100毫秒setTimeout和它的工作，我猜你可以减少延迟到10毫秒左右，测试它。

小提琴：http://jsfiddle.net/mdibaiee/7o4tLr4L/

要在手机上进行测试，请执行以下操作：http://fiddle.jshell.net/mdibaiee/7o4tLr4L/show/