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

CSS属性width和height拉伸画布，为了缩放.attr ，必须使用.attr而不是.css ，这将起作用，但是，需要注意以下几点：

如果您也希望画布在手机上看起来完美，则必须注意window.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毫秒左右，然后进行测试。

Answer 2

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

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