当视口更改时，如何动态更新画布大小（实际像素）？

Question

我正在使用bootstrap4并在<canvas id='can'>中放置<div>（0填充） CSS：canvas {height: 200; width 100%;}。我是我的init()方法，我重置can.height和can.width以匹配我的（例如document.getElementById('can').getBoundingClientRect(））。因此，真实像素与CSS像素匹配。

这很有效，直到用户调整浏览器大小（即更改视口）。

我的问题是：如何在视口更改时设置要触发的事件处理程序？

Answer 1

您可以使用https://developer.mozilla.org/en-US/docs/Web/Events/resize

window.addEventListener("resize", function() {
    //do whatever to set the size
}, false);