2011-09-24 69 views
1

我想为我的HTML游戏制作可移动的世界,所以我将1600x1200画布放入我的800x600 div元素中,并使用左侧和顶部移动世界。我预计div会限制画布的大小,但是我的画布会覆盖我的div的边框。 div不伸展,canvas独立于div。限制(装夹)画布尺寸

我试过!重要的,最大宽度和最大高度,不同的显示器,没有什么作品。使用CSS的宽度和高度只是缩放画布。我也尝试将我的画布作为外部对象放入SVG中,但出现错误“getContext不是函数”。

那么,我怎样才能限制我的画布的大小?

回答

0

div是要扩大你的canvas的大小,除非div在其CSS overflow: hidden;集。子元素大于父元素,并且您没有严格地告诉浏览器限制父元素的大小。

max-widthmax-height属性不会帮助你,因为你没有在div内放置“可打包”内容。如果您将div中的文字设置为max-width,则该值将受到尊重。如果你放置一个尺寸不变的元素,如imagecanvas元素,浏览器不能动态地将它包装起来,就像一堆漂浮的divs或一些文本一样。在这种情况下,您有overflow,需要以不同方式处理。

你可以实现你通过与position和/或用于canvas元素margin属性玩找什么,一旦你设置父div隐藏溢出。