javascript - 当视口(viewport)发生变化时，如何动态更新 Canvas 大小(实际像素)？

Question

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

在用户调整浏览器大小(即更改视口(viewport))之前，这种方法效果很好。

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

Answer 1

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

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