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

我正在製作一個簡單的應用程序，使用HTML5 < canvas>標籤並使用Cordova將代碼編譯到本機應用程序，但問題在於canvas使用的座標不相對於它的大小，我們計劃通過蘋果和谷歌支持的設備......這可能意味着至少超過10個屏幕尺寸/分辨率。HTML5 <canvas>縮放到不同的檢測屏幕尺寸

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

將使用基於模型的座標有幫助嗎？

謝謝！

來源

2012-06-20 bouncingHippo

更重要的是，這些屏幕可能具有不同的縱橫比，所以使用相對於畫布尺寸的座標不會對您有太大的幫助（或者至少會導致一些奇怪的圖形）。 – Graham

請注意，手機/平板電腦的用戶可以旋轉他們的設備，同時看着你的網頁... – Pointy

是尖的，我們也想讓應用程序也可以旋轉... – bouncingHippo

我敢肯定，你只能在畫布元素本身設置一個寬度和高度。如果您想根據人像，風景等改變其大小，可以使用CSS media queries。我很確定這會讓你的畫布在某些情況下看起來不是很高質量，因爲你基本上只是縮小或縮小了預定義元素的大小。

根據屏幕大小等，可能會有更好的方法來重畫畫布，但我沒有嘗試過。

來源

2012-06-20 17:55:51

您可以使用[JavaScript/jQuery]設置寬度和高度，（http://jsfiddle.net/pY8XK/）。我認爲你的意思是你不應該用CSS來改變它。 – Zhihao

是@Zhao好我不想改變它與CSS，因爲它會降低圖像質量。通過javascript/jquery ...是否有任何功能已經做到了，或者我必須自己編寫一個庫？ – bouncingHippo

我不知道任何JavaScript或jQuery庫，這將幫助您更改畫布的尺寸，同時調整內容的大小，如果這就是您的意思。我還沒有用過很多畫布，所以可能有一個我不知道的畫布。不幸的是，調整大小的畫布在大多數情況下也會清除它。也許可以將畫布保存爲圖像，調整圖像大小，然後在調整大小後將其重新繪製到畫布上？ – Zhihao

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

回答

相關問題