javascript – 在fabric.js中设置画布的宽度和高度

我的 HTML5画布中有一个图像背景.

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

如何将画布的尺寸(宽度,高度)设置为背景图像的尺寸？

谢谢.

解决方法

您可以使用CSS或dom属性来设置画布的尺寸.如果您知道图像的尺寸,可以在样式表中进行：

#canvas1 { width: XXXpx; height: YYYpx; }

或者在dom中：

<canvas id="canvas1" width="XXX" height="YYY"></canvas>

如果图像是动态的并且想要在JS中设置尺寸,则执行以下操作：

var image = new Image()
image.src = 'http://fabricjs.com/assets/jail_cell_bars.png';

image.onLoad = function () { 
  var canvas = document.getElementById('canvas1');

  canvas.width = image.width;
  canvas.height = image.height;
};