HTML5畫布高度和寬度100％扭曲遊戲動畫

我不確定，我如何可以更具體，但我正在盡我最大的努力來解釋它。我想了解，我應該尋找什麼更具體一些，所以這是我在這一刻所得到的。HTML5畫布高度和寬度100％扭曲遊戲動畫

我在探索HTML5 JavaScript遊戲，並且我注意到，使畫布的高度和寬度100％扭曲了內部的動畫。 a simple example我從here得到。如果我將畫布大小更改爲100％（在我提供的示例中），它將打破遊戲的動畫（例如小行星）。

我想知道，HTML5的哪個屬性負責此行爲，我應該尋找什麼來獲得適合完整屏幕尺寸的HTML5動畫？

編輯
我試圖運行科爾多瓦打造遊戲本地平臺，但是第一個問題我遇到的是畫布沒有安裝屏幕尺寸。（這就是爲什麼我希望它完全適合瀏覽器屏幕，但是當瀏覽器屏幕製作的畫布呈現給使用科爾多瓦的本機時，我發現完全不合適）。
我探索了移相器，他們如何解決這個問題，以及found this game，它使用了一種叫做ScalingManager的東西。
所以，我的問題是
1.什麼是縮放比賽？
2.移相器的縮放管理器工作原理
3.如果不使用縮放管理器，爲什麼遊戲不適合屏幕尺寸？即使正確提到了畫布的高度和寬度？
4.是否有一個小實驗（不使用任何相位器或類似的JavaScript遊戲框架），我可以通過簡單的HTML5 javasctipt和cordova來理解縮放的需要？

來源

2015-11-06 souparno majumder

畫布具有不同的尺寸：

元素的頁面
大小在畫布的像素

爲了避免失真，並獲得一個像素的大小 - 完美的圖形，你需要確保他們最終平等...例如：

function redraw() { 
    canvas.width = canvas.offsetWidth; 
    canvas.height = canvas.offsetHeight; 
    ... 
}

對於單頁HTML遊戲中你只是想畫的一切在畫布上簡單的方法是：

<!DOCTYPE html> 
<html> 
    <head> 
    <style type='text/css'> 
     * { 
      margin: 0; 
      padding: 0; 
      border: none; 
     } 

     body,html { 
      height: 100%; 
      width: 100%; 
     } 

    </style> 
    </head> 
    <body> 
    <script> 
     var canvas = document.createElement('canvas'); 
     canvas.style.position = 'absolute'; 
     var body = document.body; 
     body.insertBefore(canvas, body.firstChild); 
     var context = canvas.getContext('2d'); 

     var devicePixelRatio = window.devicePixelRatio || 1; 
     var backingStoreRatio = context.webkitBackingStorePixelRatio 
      || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio 
      || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; 
     var ratio = devicePixelRatio/backingStoreRatio; 

     redraw(); 
     window.addEventListener('resize', redraw, false); 
     window.addEventListener('orientationchange', redraw, false); 
     function redraw() { 
      width = (window.innerWidth > 0 ? window.innerWidth : screen.width); 
      height = (window.innerHeight > 0 ? window.innerHeight : screen.height); 
      canvas.style.width = width + 'px'; 
      canvas.style.height = height + 'px'; 
      width *= ratio; 
      height *= ratio; 

      if (canvas.width === width && canvas.height === height) { 
       return; 
      } 

      canvas.width = width; 
      canvas.height = height; 
     } 
     //draw things 
    </script> 
    </body> 
</html>

您還需要檢查的變化innerWidth/innerHeight如果你的應用程序有部分在其中只是在等待用戶交互（不呼叫呼叫redraw），用戶改爲調整瀏覽器窗口大小或傾斜電話/標籤。

來源

2015-11-06 11:09:36 6502

HTML5畫布高度和寬度100％扭曲遊戲動畫

回答

相關問題