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

我在用javascript测试一些代码，关于调整html5画布的大小。我以前也问过类似的问题，当时我正在用jquery测试同样的东西。当时我得到了理想的解决方案，参考文献eg_1。在这个示例1中，结果是，由于requestAnimationFrame$.fn.animate，画布元素在每个帧中都在调整大小；是以递归形式发生的。这里的可视化结果是，当我调整控制台窗口的大小时，宽度属性将更新。如果我关闭控制台，画布会自动调整大小，我不需要重新加载窗口来更新属性值。意味着画布始终是全屏的。但我在javascript中遇到了同样的问题。如果我关闭控制台，控制台的宽度将剪切画布或调整画布的大小，并显示一个空白。这是视觉效果，空白是我的问题。我必须重新加载窗口，使画布再次全屏显示。简言之，我的效果与eg_1不同。到目前为止，我在这里试过，参考文献如图2

例1

html:

css:

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

答复: 你的第一期：

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

为此，可以将变量转换为请求当前值的函数

例子： var canvas=document.querySelectorAllcanvas[0]； var context=canvas.getContext2d； var windowWidth==>window.innerWidth； var windowHeight==>window.innerHeight； 函数调整大小{ setIntervalresize，5； 清晰间隔； canvas.width=窗口宽度； canvas.height=窗口高度； } 调整大小； * { 保证金：0； 填充：0； 溢出：隐藏； } 帆布{ 背景颜色：青绿色； }

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

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