javascript - 在fabric.js中设置 Canvas 的宽度和高度

Question

我的 HTML5 Canvas 中有一个图像背景。

var canvas = new fabric.Canvas('#canvas1');
canvas.setBackgroundImage(
            'http://fabricjs.com/assets/jail_cell_bars.png',
             canvas.renderAll.bind(canvas)
       );

如何将 Canvas 的尺寸(宽度、高度)设置为背景图像的尺寸？

谢谢。

Answer 1

我认为上面的答案没有使用fabric.js，它使用普通的 Canvas 。

当你使用fabric.js及其Fabric.Canvas类时，代码应该是:

image.onLoad = function() {
  var fabric_canvas = new fabric.Canvas('canvas1');
  fabric_canvas.setDimensions({width:image.width, height:image.height});
}; 

就我而言，

var canvas = new fabric.Canvas("test_fabric");
canvas.setDimensions({width:800, height:200});

结果是:

<canvas id="test_fabric" width="800" height="200" class="lower-canvas" style="position: absolute; width: 800px; height: 200px; left: 0px; top: 0px; -webkit-user-select: none;"></canvas>

canvas.width 和 canvas.style.width 均已设置。