Question

如何使画布对用户调整屏幕大小作出响应？仅使用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);

Answer 1

选项1）将您的加载事件列表器更改为此，并删除调整大小的事件监听器

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

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

选项2）定义载入事件列表器中的screenSize函数

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)

在屏幕更改大小时调整画布大小

1 个答案: