Question

我在javascript中编写一个简单的游戏，它使用HTML画布。画布具有固定大小（1280×720），也是绘制对象的“空间”。

现在我想要将画布拉伸到屏幕的100％。我不能通过设置画布的宽度和高度来做到这一点，因为javascript只能在左上角的1280×720矩形中绘制。

我想要的是，它被放大以便占据整个屏幕，如果javascript在（1280,720）绘制某些东西，它应该是右下角。

我可以不使用任何外部库吗？

Answer 1

如果您希望将画布的渲染大小保持在1280x720，但是将其拉伸或展开到窗口大小，则可以使用css的宽度和高度。

使用css只会导致画布的形状发生变化，但内部像素/绘图框仍然由width和height属性设置。（这当然会导致图像模糊，如果它是高档的那么多）

使用CSS：

＆＃13;

* { margin: 0; padding: 0;}

body, html { height:100%; }

#canvasID {
    position:absolute;
    height:100%;
    /*width:100%; /* uncomment if you don't care about aspect ratio*/
}

＆＃13;

<canvas id="canvasID" width=128 height=72>

＆＃13;

使用脚本：

＆＃13;

$(document).ready(function() {
  function resizeCanvas() {
    var canvas = $("#canvasID");
    // original width/height from the canvas attribute
    var heightOriginal = canvas[0].height;
    var widthOriginal = canvas[0].width;

    // fill to window height while maintaining aspect ratio
    var heightNew = window.innerHeight;

    // replace with window.innerWidth if you don't care about aspect ratio
    var widthNew = heightNew / heightOriginal * widthOriginal;

    canvas.css("height", heightNew + "px");
    canvas.css("width", widthNew + "px");
  }

  // keep size when window changes size
  $(window).resize(resizeCanvas);

  // initial resize of canvas on page load
  resizeCanvas();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="canvasID" width=128 height=72>

＆＃13;

或者，如果您希望内部画布分辨率/大小能够动态更改，则可以使用缩放来确保将所有内容渲染到正确的大小。

＆＃13;

$(document).ready(function() {
    var canvas = $("#canvasID");
    // original width/height from the canvas attribute
    var heightOriginal = canvas[0].height;
    var widthOriginal = canvas[0].width;
    // current scale (original 1 to 1)
    var verticalRatio = 1;
    var horizontalRatio = 1;

    // the canvas context
    var ctx = canvas[0].getContext('2d');

    function setScale() {
      // remove previous scale
      ctx.scale(1/horizontalRatio, 1/verticalRatio);

      // fill to window height while maintaining aspect ratio
      var heightNew = window.innerHeight;
  
      // not needed if you don't care about aspect ratio
      var widthNew = heightNew / heightOriginal * widthOriginal;

      // these would be the same if maintaining aspect ratio
      verticalRatio = heightNew / heightOriginal;
      horizontalRatio = widthNew / widthOriginal;
      
      // update drawing scale
      ctx.scale(horizontalRatio, verticalRatio);

      // update width and height of canvas
      canvas[0].height = heightNew;
      canvas[0].width = widthNew;
    }
  
    // keep size when window changes size
    $(window).resize(setScale);
  
    // initial resize of canvas on page load
    setScale();
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="canvasID" width=128 height=72>

＆＃13;

绘制后将画布调整为整个屏幕

1 个答案: