Question

我已经学会了如何在HTML5中使用Canvases，我有一个问题。

有没有办法让画布不拉伸页面上的其他元素？例如，我有一些文本，如果我放一个500px宽的画布，文本被发送到右边为画布腾出空间，有没有办法将画布放在文本下面或只是让它不拉伸其他元素在页面中，还是仅仅是一种技术用于以某种方式适当地定位画布，以便它在您想要的位置？

感谢您的帮助。

Answer 1

就像对待div一样对待画布。你调整div的大小/位置的方式，你可以用画布做同样的事情。如果您在调整画布时遇到特定问题，请发布您正在使用的代码。

编辑：另外，如果要使用CSS设置画布高度/宽度，请小心，因为它只会更改元素大小，而不会更改绘图表面大小。要确保元素和绘图表面大小都发生更改，请使用width和height属性。

Answer 2

您应该在canvas元素中包含宽度和高度属性。

canvas.width  = 600;
canvas.height = 600;

如果您想适应屏幕自动，请参阅下面的问题 Resize HTML5 canvas to fit window

Answer 3

使用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;
}

Answer 4

画布是flow element。您可以将其与其他流元素完全一样定位，例如div。它有default dimensions (300 x 300)但其他行为大多像div。

要继续下一行，您可以这样做：

aaa
<br>
<canvas id=a></canvas>

CSS有很多可能性（与所有流元素相同），很难列出它们。

HTML5如何使画布不拉伸页面？

4 个答案: