HTML5遊戲開發 - 縮放HTML +畫布

Question

我正在開發CSS和Canvas遊戲。 UI正在用CSS開發，因爲它使事情變得更快。

我想開發1366x768或1920x1080。

---

帆布似乎很容易爲明顯擴大所有需要的是（簡單的例子）：

HTML

<canvas width=1366 height=768> 

CSS

canvas{ width:100%; height:100%; } 

但我怎麼會去上關於整個頁面的縮放比例？ CSS包含我想用畫布進行縮放的紋理和其他資源。

---

解決方案到目前爲止，我發現是：

CSS

-webkit-transform: scale(resolutionRatio, resolutionRatio) 

其中resolutionRatio = newResolution/1366

但我並不完全相信這是我敢肯定它不是與width: 100%相同，不知道它的行爲是否與畫布縮放相同。

---

你會特別推薦任何東西嗎？我完全離開嗎？

希望有人能幫忙。謝謝！ :)

Answer 1

您已經在畫布上使用寬度和高度100％，因此它和其中的所有內容都將隨頁面一起縮放（並且不幸的是，質量和性能也會降低）。

的最佳方式向規模化，帆布不要拿％值本身，是計算以像素爲單位的實際寬度和高度（和移除任何CSS縮放）：

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

這個你可以調用window的resize事件，並且在重新繪製縮放的所有內容時準備好重畫功能。多一點工作，但更好的結果（和性能）。

如果你另外設置畫布爲position: fixed，你也會對頁面的更新有一些幫助。