我想为我的 HTML 游戏制作可移动的世界，所以我将 1600x1200 的画布放在我的 800x600 div 元素中，并使用 left 和 top 来移动世界。我希望 div 会限制我的画布的大小，但我的画布会覆盖我的 div 的边框。 div 不拉伸，画布独立于 div 缩放。
我尝试了！important，最大宽度和最大高度，不同的显示，没有任何效果。对宽度和高度使用 CSS 只会缩放画布。我也尝试将画布作为外来对象放入 SVG，但出现错误“getContext 不是函数”。
那么，如何限制画布的大小？
【问题讨论】：
标签： html html5-canvas
div 将扩展到您的canvas 的大小，除非div 在其CSS 中设置了overflow: hidden;。子元素比父元素大，你并没有严格告诉浏览器限制父元素的大小。
max-width 和 max-height 属性在这里对您没有帮助，因为您没有在 div 中放置“可包装”内容。如果您将文本放入 div 并设置了 max-width，则该值将受到尊重。如果你放置一个大小不变的元素，比如image 或canvas 元素，浏览器就不能像一堆浮动的divs 或一些文本那样动态地包装它。在这种情况下，您有overflow，需要以不同方式处理。
将父级div 设置为隐藏溢出后，您可以通过使用canvas 元素的position 和/或margin 属性来实现您想要的。
【讨论】：