如何在视口更改时动态更新画布大小(实像素)

Question

我正在使用bootstrap4并将<canvas id='can'>放在<div>中（填充0）CSS： canvas {height: 200; width 100%;} .我我的js 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);