当视口宽度/高度更改而无需刷新时调整 Canvas

Question

我已经根据教程设置了 canvas，但我需要让它响应。 目前，如果我更改视口大小并刷新，我可以调整 canvas 的大小，但我需要它实时进行。

HTML：

<canvas id="canvas" width="" height=""></canvas>

JS：

var canvas = document.querySelector('canvas'); 

canvas.width = window.innerWidth
canvas.height = window.innerHeight;

window.addEventListener('resize',() => {
    canvas.setSize(window.innerWidth,window.innerHeight);
})

var c = canvas.getContext('2d');

//Rectangles

c.fillStyle = "rgba(255,0,0,0.2)"
c.fillRect(50, 100, 100, 100);

我试过添加一个 EventListener 但控制台给了我以下错误：

未捕获的类型错误：canvas.setSize 不是函数”

我如何让 EventListener 工作？

Answer 1

你可以使用类似的东西：

canvas.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

canvas.setSize真的不是一个东西，所以这就是你得到 TypeError 的原因。