縮放Web視口與畫布元素的移動性能影響是什麼？

Question

我有一個應用程序，它爲GUI混合了DOM，SVG和<canvas>，並且想知道不同縮放方法的含義。

我想找到一個很好的策略，縮放應用程序的佈局使得：

1. 該應用程序的大小爲固定縱橫比（比如4×3），並最大化的設備，因此「letterboxed」並水平或垂直居中。

2. 應用程序代碼儘可能乾淨。理想情況下，這意味着應用程序代碼可以採用合理的整體大小（例如1024x768）。

3. 任何需要的縮放均以不會對GPU性能產生負面影響的方式應用。

棘手位是<帆布>元件是光柵化，而所有其他部分比例相當無縫獨立的裝置的分辨率。縮放完整的視口意味着前者將按照使其變得模糊的方式進行縮放，並且我相信會影響渲染性能（正確？）。然而，替代方法是在運行時計算<畫布的尺寸，這意味着更復雜的繪圖對象代碼以及圖形緩衝區的可變內存使用。我不相信這是一個公平的假設，即具有兩倍分辨率的設備可以處理兩倍於同等性能的像素推動。

舉個例子，假設應用程序想要處於橫向模式，邏輯大小爲1024x768，設備爲1600x1280。由於邏輯具有0.75的方面和物理的0.80，這將需要垂直letterboxing，或縮放應用程序的高度1600/1024 = 1.5625。

第一種方式，縮放視窗

var viewport = document.querySelector('meta[name=viewport]'); 
var scale = [ calculate ... ]; 
viewport.setAttribute('content', 'width=device-width, initial-scale='+scale+', maximum-scale='+scale+', user-scalable=0'); 

• PRO定位是符合市場預期。
• PRO該應用中的最小代碼;可以在任何地方呈現邏輯座標/維度
• CON畫布元素模糊或像素化。可能會影響畫布表現？

第二種方法中，計算的縮放，並使用該計算的邏輯尺寸

保持視口比例爲1.0，但調整任何「像素」的值，以及<帆布>尺寸，相應地。因此，例如，想要在畫布是該應用的一半寬度將正在使用設備的分辨率（被定尺寸爲（邏輯1024）/ 2 *（比例係數1.5）= 768。

• PRO畫布元件或在視網膜/高清顯示器中爲1/2）。
• CON畫布元素使用可變數量的內存，這可能無法很好地擴展性能。
• CONbody標籤上需要樣式才能縮放文本;這反過來看起來像是一堆蠕蟲，它如何影響靜態/相對定位的嵌套元素。
• CON代碼需要將比例因子或動態計算的座標/尺寸傳遞給畫布元素中的所有繪圖命令。

我不清楚CSS em單元如何進入這一切。字體希望用ems來設置大小，但ems中的字體大小的元素會改變子元素的縮放比例，而且我不想最終與這種與「全局」縮放相互作用的角色摔跤。但是實際上這可能並不重要？

任何建議爲一個堅實的整體方法？

Answer 1

下面是我會做的：
•使用虛擬分辨率（您似乎稱之爲邏輯大小）爲您的畫布。
因此，您的繪圖是在虛擬分辨率（！問題已關閉！）中完成的。
•確定實際分辨率=畫布的像素大小（canvas.width = ...，canvas.height）。 請注意，您應該尊重虛擬分辨率的高寬比。
•確定畫布的CSS大小。您還必須尊重寬高比。
•決定縮放比例/ css縮放比例（'crisp'，...）
•css縮放畫布以適合其css大小。 （canvas.style.width = ...）。
（確保在x/y上按相同的比例縮放）
•變換比例（context.scale（sc，sc））畫布以適應其虛擬分辨率。
（請務必通過X/Y相同的比例縮放相同）。

我寫了一個小的LIB（SmartCanvas），即做到了這一點，不幸的是它是寫在飛鏢，所以我想你止跌」不感興趣。當改變參數'live'時，我看到，在大屏幕上（1920X1200），我需要將css縮放爲X2，以獲得體面的fps（> 40）。

事實上，棘手的部分將是決定真正的畫布分辨率。 Css縮放有一定成本，但爲了給出一個模糊的想法，用css放大X2使用X2分辨率繪製所需性能的25％。
我唯一看到避免頭痛的方法是將所有病例分成幾個，然後測試看看有什麼適合。例如：1）移動2）桌面< 1MPx 3）桌面> 1MPx。
（您可能還想處理hiDpi病例）。