HTML5如何使画布不拉伸页面

HTML5 How to make canvas not stretch page?

本文关键字：布不拉 何使画 HTML5      更新时间：2023-09-26

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

有没有办法让画布不拉伸页面上的其他元素？例如，我有一些文本，如果我放了一个500像素宽的画布，文本会被发送到右边，为画布腾出空间，有没有办法把画布放在文本下面，或者只是让它不拉伸页面中的其他元素，或者有没有一种技术可以用来适当地定位画布，使其处于你想要的位置？

谢谢你的帮助。

只需像对待div一样对待画布。通过调整div的大小/位置，可以对画布执行同样的操作。如果您在调整画布时遇到特定问题，请发布您正在使用的代码。

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

您应该在画布元素中包括width和height属性。

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

如果您想自动适应屏幕，请参阅下面的问题
调整HTML5画布的大小以适应窗口

使用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有太多的可能性（与所有流元素相同），所以很难列出它们。

相关文章：