使用 javascript 调整 html5 画布大小（未达到预期结果）

Question

我正在用 javascript 测试一些代码，关于调整 html5 画布的大小。我以前问过类似的问题，当时我用 jquery 测试同样的东西。那时我已经得到了想要的解决方案，参考（eg_1）。在这个（eg_1）中，结果是，canvas 元素在每一帧中调整大小，因为requestAnimationFrame($.fn.animate); 以递归形式发生。视觉结果是 这里宽度属性在我调整控制台窗口大小时更新.如果我关闭控制台，画布会自动调整大小，我不需要重新加载窗口来更新属性值。意味着画布始终是全屏的。但我在javascript中遇到了同样的问题。如果我关闭控制台，控制台的宽度会用空白区域切割（或调整大小）画布。这是视觉结果 空白是我的问题。我必须重新加载窗口，使画布再次全屏。简而言之，我的效果与（eg_1）不同。这里我试过了，参考（eg_2）。

（例如_1）

html : <canvas></canvas>

css：

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  background-color: turquoise;
}

jquery：

$(document).ready(function() {
  var view = $(window),
    canvas = $("canvas"),
    ctx = canvas[0].getContext("2d"),
    width = view.width(),
    height = view.height();

  $.fn.windowResize = function() {
    var width = view.width();
    height = view.height();

    canvas.attr("width", width);
    canvas.attr("height", height);
  };

  view.on("resize", $.fn.windowResize);

  canvas.attr("width", width);
  canvas.attr("height", height);

  $.fn.animate = function() {
    requestAnimationFrame($.fn.animate);
    ctx.clearRect(0, 0, width, height);
    // start here
  };

  $.fn.animate();
});

(eg_2)

var canvas = document.querySelectorAll("canvas")[0];
var context = canvas.getContext("2d");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

function resize() {
  setInterval(resize, 5);
  clearInterval(resize);
  canvas.width = windowWidth;
  canvas.height = windowHeight;
}

resize();

Answer 1

答案：

您最初的问题：

您需要获取window.innerWidth 和window.innerHeight 的更新值。

为此，您可以将变量转换为请求当前值的functions。

---

示例：

var canvas = document.querySelectorAll("canvas")[0];
var context = canvas.getContext("2d");
var windowWidth = () => window.innerWidth;
var windowHeight = () => window.innerHeight;

function resize() {
  setInterval(resize, 5);
  clearInterval(resize);
  canvas.width = windowWidth();
  canvas.height = windowHeight();
}
resize();

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  background-color: turquoise;
}

<canvas></canvas>

---

其他问题：

您对计时器的使用不正确。 clearInterval(resize) 不会清除任何内容，因为 resize 本身不是计时器。

其次，当渲染到 Canvas 时，您不应该使用任何计时器。它通常会导致上述情况（多个计时器）或持续、不必要的重新处理问题。

您可能希望在调度resize 事件时这样做，而不是永久调整大小。即使您使用requestAnimationFrame - 如果其他任何内容优先或如果您切换选项卡，这将有效地停止渲染，这是一个不必要的过程，因为您不断地无缘无故地重新渲染相同的东西。当您添加多个渲染功能时，Canvas 应用程序往往会很快变大，因此您需要减少不必要的步骤。

您可以通过附加到适当的事件并创建requestAnimationFrame 助手来做到这一点，如下例所示：

var canvas = document.querySelectorAll("canvas")[0];
var context = canvas.getContext("2d");
var windowWidth = () => window.innerWidth;
var windowHeight = () => window.innerHeight;

var request = fn => requestAnimationFrame(fn),
requestHandler = fn => () => request(fn); 

function resize() {
  canvas.width = windowWidth();
  canvas.height = windowHeight();
}

request(resize);

window.addEventListener("resize", requestHandler(resize) );

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  background-color: turquoise;
}

<canvas></canvas>