fabric.js：如何在浏览器窗口中水平居中 fabric.Canvas()？答案

【问题标题】：fabric.js: How do I horizontally center fabric.Canvas() in the browser window?fabric.js：如何在浏览器窗口中水平居中 fabric.Canvas()？
【发布时间】：2017-04-01 01:34:37
【问题描述】：

我想使用fabric.js，所以我将画布转换为fabric.Canvas。但是，这会使画布向左对齐而不是居中（使用 fabric.js v1.6.6 和任何现代浏览器，例如 Safari、Firefox、Chrome）。如何在浏览器窗口中水平居中 fabric.Canvas？

var canvas = new fabric.Canvas('c');
var triangle = new fabric.Triangle({
  width: 40,
  height: 50,
  fill: 'blue',
  left: 50,
  top: 50
});
canvas.add(triangle);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>

<div id="fabric_div" style="text-align:center">
  <canvas id="c" width="400" height="250" style="border:1px solid #ff0000"></canvas>
</div>
<p>Above is the fabric.canvas, and it appears flush left in the browser window.</p>
<p>Below is the regular canvas, and it appears centred horizontally in the browser window.</p>
<div id="regular_div" style="text-align:center">
  <canvas id="d" width="400" height="250" style="border:1px solid #00ff00"></canvas>
</div>

【问题讨论】：

标签： javascript css html5-canvas fabricjs

【解决方案1】：

由于您已经为对象设置了固定宽度，因此您可以将 margin: 0 auto; 添加到 CSS 中的 .canvas-container，如下所示：

<style>.canvas-container{margin: 0 auto;}</style>

var canvas = new fabric.Canvas('c');
var triangle = new fabric.Triangle({
  width: 40,
  height: 50,
  fill: 'blue',
  left: 50,
  top: 50
});
canvas.add(triangle);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
<style>
  .canvas-container {
    margin: 0 auto;
  }
</style>
<div id="fabric_div" style="text-align:center">
  <canvas id="c" width="400" height="250" style="border:1px solid #ff0000"></canvas>
</div>
<p>Above is the fabric.canvas, and it appears flush left in the browser window.</p>
<p>Below is the regular canvas, and it appears centred horizontally in the browser window.</p>
<div id="regular_div" style="text-align:center">
  <canvas id="d" width="400" height="250" style="border:1px solid #00ff00"></canvas>
</div>

【讨论】：