html - 当我尝试将画布居中时出错

Question

我正在尝试根据浏览器窗口的大小使画布居中。我一直实现这个 css 代码来使我的画布居中，但是使用 fabric.js 它不起作用。

这是我的CSS代码

 canvas 
 {   
   /* Código para centrar el canvas*/
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width:200px;

   /*Borde y  color de fondo */
    border-radius:10px;
    background-color:rgb(170, 107, 53);
  }

html代码

<canvas id="micanvas" width="200" height="200"></canvas>

javascript代码

var canvas = new fabric.Canvas('micanvas');

这是演示

Answer 1

似乎 FabricJS 修改了页面的 DOM，因此生成的 HTML 源代码如下（由 Firebug 显示）：

<div class="canvas-container" style="width: 200px; height: 200px; position: relative; -moz-user-select: none;">
   <canvas id="micanvas" class="lower-canvas" height="200" width="200" style="position: absolute; width: 200px; height: 200px; left: 0px; top: 0px; -moz-user-select: none;"></canvas>
   <canvas class="upper-canvas " style="position: absolute; width: 200px; height: 200px; left: 0px; top: 0px; -moz-user-select: none; cursor: default;" width="200" height="200"></canvas>
</div>

所以你需要的不是画布本身，而是.canvas-containerdiv：

.canvas-container {    
    margin-left: auto;
    margin-right: auto;
}

小提琴

Answer 2

织物放在canvas里面<div class="canvas-container">所以添加

.canvas-container
{   
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

jsFiddle