错误，当我尝试中心画布

我想根据浏览器窗口的大小居中画布。我一直实现这个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');

Here's the demo

来源

2013-07-14 Oscar Emilio Perez Martinez

似乎FabricJS修改DOM页面，因此产生的HTML源代码如下（由萤火虫所显示）：

<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-container格：

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

fiddle

来源

2013-07-14 00:44:14

布放canvas内<div class="canvas-container">所以加

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

jsFiddle

来源

2013-07-14 00:45:10 furas

错误，当我尝试中心画布

回答

相关问题