javascript - 绘制后将 Canvas 调整为整个屏幕

Question

我正在用 JavaScript 编写一个在 HTML Canvas 上绘制的简单游戏。 Canvas 有一个固定大小(1280 × 720)，也是绘制对象的“房间”。

现在我希望 Canvas 被拉伸(stretch)到屏幕的 100%。我不能仅通过设置 Canvas 的宽度和高度来做到这一点，因为 javascript 只会在左上角的 1280 × 720 矩形中绘制。

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

我可以在不使用任何外部库的情况下做到这一点吗？

Answer 1

如果您希望将 Canvas 的渲染大小保持在 1280x720，但将其拉伸(stretch)或扩展到窗口大小，您可以为此使用 css 宽度和高度。

使用css只会导致 Canvas 的形状改变，但内部像素/绘图框仍然由width和height属性设置。 (如果高档太多，当然会导致图像模糊)

使用 CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

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

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

使用脚本:

$(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();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

或者，如果您希望内部 Canvas 分辨率/大小能够动态更改，您可以使用缩放来确保所有内容都以正确的大小呈现。

$(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();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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