我已经学会了如何在 HTML5 中使用画布,我有一个问题。
有没有办法让画布不拉伸页面上的其他元素?例如我有一些文本,如果我放置一个 500px 宽的画布,文本被发送到右侧为画布腾出空间,有没有办法将画布放在文本下面或者只是让它不拉伸其他元素在页面中,或者是否只是一种用于以某种方式适当定位画布的技术,以便它位于您想要的位置?
谢谢你的帮助。
我已经学会了如何在 HTML5 中使用画布,我有一个问题。
有没有办法让画布不拉伸页面上的其他元素?例如我有一些文本,如果我放置一个 500px 宽的画布,文本被发送到右侧为画布腾出空间,有没有办法将画布放在文本下面或者只是让它不拉伸其他元素在页面中,或者是否只是一种用于以某种方式适当定位画布的技术,以便它位于您想要的位置?
谢谢你的帮助。
就像对待 div 一样对待画布。调整 div 的大小/位置的方式,你可以对画布做同样的事情。如果您在调整画布时遇到特定问题,请发布您正在使用的代码。
编辑:另外,如果您使用 CSS 设置画布高度/宽度,请小心,因为它只会更改元素大小,而不是绘图表面大小。要确保元素和绘图表面大小都发生变化,请使用 width 和 height 属性。
您应该在画布元素中包含宽度和高度属性。
canvas.width = 600;
canvas.height = 600;
如果您想自动适应屏幕,请参阅下面的问题
Resize HTML5 canvas to fit window
使用 css 样式的 z-index 使您的文本位于画布上方。
示例 CSS:
#canvas_id
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:-1;
}
#text_div
{
position:absolute;
width: 100px;
height: 100px;
top: 100px;
left: 100px;
z-index:0;
}
画布是一个流程元素。您可以像使用其他流元素一样定位它,例如 div。它具有默认尺寸(300 x 300),但在其他方面表现得更像一个 div。
要进入下一行,您可以这样做:
aaa
<br>
<canvas id=a></canvas>
CSS 有很多可能性(与所有流元素一样),很难一一列举。