如何在html5中居画布

Question

我一直在寻找解决方案一段时间,但没有找到任何东西.也许这只是我的搜索条件.好吧,我正在尝试根据浏览器窗口的大小制作画布中心.画布是800x600.如果窗口低于800x600,它也应该调整大小(但目前这不是很重要)

Answer 1

为画布提供以下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: flexIE11中提供的方法

另外,请确保使用最近的doctype,例如xhtml或html 5.

Answer 2

您可以为画布提供ff CSS属性:

#myCanvas
{
    display: block;
    margin: 0 auto;
}

Answer 3

只需将HTML居中于HTML:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

只需将高度和宽度更改为任何内容,您就拥有了一个居中的div

http://jsfiddle.net/BVghc/2/

Answer 4

要水平居中画布元素，您必须将其指定为块级别并将其左右边距属性留给浏览器：

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

Answer 5

您也可以使用 Flexbox，但是canvas元素必须在 a 内div，仅将其应用于canvas元素是行不通的。

HTML：

<div class="canvas-container">
    <canvas width="150" height="200"></canvas>
</div>

CSS：

<div class="canvas-container">
    <canvas width="150" height="200"></canvas>
</div>

Answer 6

只有当您的画布与容器的宽度相同时,上述答案才有效.

这适用于:

#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" width="100" height="100"></canvas>
</div>

Answer 7

添加text-align: center;到的父标签<canvas>。就是这样。

例子：

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>