Javascript 随着屏幕大小的变化调整画布的大小

如何使画布对用户调整屏幕大小作出响应？仅使用window.innerHeight/Width就可以实现全屏，但屏幕没有响应，这正是我所需要的。您还可以在函数中创建函数并在以后调用它吗

window.addEventListener('load', (event) => {
   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');

  function screenSize() {
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
  }

});


window.addEventListener('resize', screenSize);

选项1）将load event listner更改为此，并删除resize event listener

window.addEventListener('load', (event) => {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  function screenSize() {
    canvas.height = "100vh";
    canvas.width = "100vw";
  }
});

选项2）在加载事件列表中定义屏幕大小函数

window.addEventListener('load', (event) => {
   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
});

function screenSize () {
  const canvas = document.getElementById("myCanvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

window.addEventListner("resize", screenSize)

---

screenSize

在arrow函数的范围内。将其移动到外部，这将需要修复画布元素的作用域。否则，将ResivivEngress绑定绑定到加载事件处理程序中，也可以考虑使用“代码> VW < /代码>和<代码> VH < /Cord>单元，以使您的宽度和高度更大，并且让浏览器为您调整大小。谢谢！这对您有很大帮助！