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％扭曲游戏动画

回答

相关问题