我可以使用 vh 和 vw 指定 canvas 维度吗？

Question

我的代码是：

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.canvas.width = 40vw;
ctx.canvas.height = 40vh;

而且它不起作用。在JavaScript中设置canvas维度时是否可以使用vw和vh？如果可以，怎么做？

Answer 1

我意识到我可以使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 分别计算出 vw 和 vh。

Answer 2

HTML:

<canvas class="canvas_hangman"></canvas>

JS:

function setUpCanvas() {
  canvas = document.getElementsByClassName("canvas_hangman")[0];
  ctx = canvas.getContext('2d');
  ctx.translate(0.5, 0.5);

  // Set display size (vw/vh).
  var sizeWidth = 80 * window.innerWidth / 100,
    sizeHeight = 100 * window.innerHeight / 100 || 766;

  //Setting the canvas site and width to be responsive 
  canvas.width = sizeWidth;
  canvas.height = sizeHeight;
  canvas.style.width = sizeWidth;
  canvas.style.height = sizeHeight;
}

window.onload = setUpCanvas();

这也完美地设置了您的 HTML canvas 以响应方式进行绘制。

我可以使用 vh 和 vw 指定 canvas 维度吗？

Can I specify canvas dimensions using vh and vw?

html

javascript

html5-canvas