HTML5 <canvas> 縮放到檢測到的不同屏幕尺寸

Question

我正在使用HTML5 <canvas>標簽制作一個簡單的應用程序，並使用Cordova將代碼編譯為本機應用程序，但問題是畫布使用的坐標與尺寸無關，我們計划在畫布上使用蘋果和谷歌支持的設備...這可能意味着至少10種以上的屏幕尺寸/分辨率。

所以我想知道如何在不同的屏幕尺寸上使用<canvas> （將以全屏顯示）。

使用基於模型的坐標會有所幫助嗎？

謝謝！

Answer 1

我很確定您只能在canvas元素本身中設置一個寬度和高度。 如果要根據肖像，風景等更改其大小，可以使用CSS媒體查詢 。 我很確定這會使您的畫布在某些情況下看起來不是很高的質量，因為您實際上只是在放大或縮小預定義元素的大小。

根據屏幕尺寸等，可能會有更奇妙的方式來重新繪制畫布，但是我還沒有嘗試過。