如何在html5中居中画布
Posted
技术标签:
【中文标题】如何在html5中居中画布【英文标题】：How to center canvas in html5 【发布时间】：2011-07-04 22:01:27 【问题描述】：我一直在寻找解决方案一段时间，但没有找到任何东西。也许这只是我的搜索词。 好吧，我正在尝试根据浏览器窗口的大小使画布居中。画布为 800x600。 如果窗口低于 800x600，它也应该调整大小（但目前这不是很重要）
【问题讨论】：
我如何告诉它在调整大小时制作一个完整的页面画布而不给出尺寸并且没有滚动条？ 不要在 html 中执行 .. 使用 javascript 执行，使用 appendChild 之类的东西并将宽度和高度设置为 window.innerWidth 和 window.innerHeight 【参考方案1】：您也可以使用 Flexbox，但 canvas 元素必须在 div 内，仅将其应用于 canvas 元素将不起作用。
HTML：
<div class="canvas-container">
<canvas ></canvas>
</div>
CSS：
.canvas-container
display: flex;
align-items: center;
justify-content: center;
【讨论】：
【参考方案2】：使用网格？
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);body, html
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
body
display: grid;
grid-template-rows: auto;
justify-items: center;
align-items: center;
canvas
height: 80vh;
width: 80vw;
display: block;
<html>
<body>
<canvas></canvas>
</body>
</html>【讨论】：
【参考方案3】：要将画布元素水平居中，您必须将其指定为块级别并将其左右边距属性留给浏览器：
canvas
margin-right: auto;
margin-left: auto;
display: block;
如果你想垂直居中，画布元素需要绝对定位：
canvas
position: absolute;
top: 50%;
transform: translate(0, -50%);
如果您想将其水平和垂直居中，请执行以下操作：
canvas
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
欲了解更多信息，请访问：https://www.w3.org/Style/Examples/007/center.en.html
【讨论】：
【参考方案4】：将text-align: center; 添加到<canvas> 的父标记。就是这样。
示例：
<div style="text-align: center">
<canvas >
<!--your canvas code -->
</canvas>
</div>
【讨论】：
这很简单，然后使用 css 最简单也解决了我的问题。我认为最好的答案。【参考方案5】：使用此代码：
<!DOCTYPE html>
<html>
<head>
<style>
.text-center
text-align:center;
margin-left:auto;
margin-right:auto;
</style>
</head>
<body>
<div class="text-center">
<canvas id="myCanvas" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
</body>
</html>
【讨论】：
【参考方案6】：为画布赋予以下 css 样式属性：
canvas
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
编辑
由于这个答案很受欢迎，让我添加更多细节。
以上属性将水平居中画布、div 或您拥有的任何其他节点（相对于它的父节点）。无需更改顶部或底部边距和填充。您指定宽度并让浏览器使用自动边距填充剩余空间。
但是，如果您想输入更少，您可以使用任何您希望的 css 速记属性，例如
canvas
padding: 0;
margin: auto;
display: block;
width: 800px;
然而，垂直居中画布需要不同的方法。您需要使用绝对定位，并指定宽度和高度。然后将left、right、top、bottom属性设置为0，让浏览器用自动边距填充剩余空间。
canvas
padding: 0;
margin: auto;
display: block;
width: 800px;
height: 600px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
画布将根据第一个将position 设置为relative 或absolute 的父元素居中，如果没有找到则居中。
另一种方法是使用display: flex，它在 IE11 中可用
另外，请确保您使用最新的文档类型，例如 xhtml 或 html 5。
【讨论】：
显示：块；和边距：0 自动 0 自动；也够了。谢谢！ 对于画布的垂直居中，您不需要将宽度和高度放入，只要您在 HTML 中指定即可。无论如何，在 chrome 上。 宽度和高度可以用css或html指定。但是 css 是推荐的方式，因为所有的表示逻辑都应该去那里。 它使画布居中，但如果画布上绘制了图像，则它正在拉伸。您可以在不拉伸图像的情况下将画布居中吗 在画布元素的内联样式中设置高度和宽度会弄乱我绘制的图像的大小等。只是一个警告，希望能避免一些挫折。【参考方案7】：仅当您的画布与容器的宽度相同时，上述答案才有效。
无论如何这都有效：
#container
width: 100px;
height:100px;
border: 1px solid red;
margin: 0px auto;
text-align: center;
#canvas
border: 1px solid blue;
width: 50px;
height: 100px;
<div id="container">
<canvas id="canvas" ></canvas>
</div>【讨论】：
【参考方案8】：您可以为您的画布赋予 ff CSS 属性：
#myCanvas
display: block;
margin: 0 auto;
【讨论】：
你能提供一个jsfiddle吗？这种方法似乎不起作用 这适用于水平居中，但不适用于垂直居中。【参考方案9】：我遇到了同样的问题，因为我有许多不同宽度的图片，我只加载了高度信息。设置宽度允许浏览器拉伸和挤压图片。我通过将 image_tag 行之前的文本行居中来解决问题（也摆脱了 float: left;）。我本来希望文本左对齐，但这是一个小小的不便，我可以容忍。
【讨论】：
【参考方案10】：只需在 HTML 中将 div 居中：
#test
width: 100px;
height:100px;
margin: 0px auto;
border: 1px solid red;
<div id="test">
<canvas ></canvas>
</div>
只需将高度和宽度更改为任意值，您就有了一个居中的 div
http://jsfiddle.net/BVghc/2/
【讨论】：
我很幸运，我在你发布后不久就需要它。 :) 如果画布小于容器，这不起作用。以上是关于如何在html5中居中画布的主要内容，如果未能解决你的问题，请参考以下文章