如何处理放大、缩小和按“全屏”键画布中的问题？

Question

我想让画布与 css height = 100% 的图像完全重叠 http://clec.twbbs.org /Screenshot.png ？ 但是，当我放大、缩小或按“全屏”时，画布与图像大小不匹配 http://clec.twbbs.org/Screenshot-2.png。我想知道如何解决这个问题。

多谢

Answer 1

在没有看到您的来源的情况下，我建议在图像和画布标签周围添加一个包装器。

<div id='wrapper'>
    <img/>
    <canvas/>
</div>

那么画布元素就不会扩展到包装器的边界之外。

另一种方法是将事件绑定到 window.resize 并使 canvas 元素等于图像元素的宽度/高度。