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 */
}