Question

我目前正在尝试获取canvas实例的backgroundImage对象，但它不起作用。我得到了canvas对象的所有属性，但没有得到我当前加载的backgroundImage的属性。还有谁想出那个问题？这就是我所拥有的

var bgImg = canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
  width: bgWidth,
  height: bgHeight,
  originX: 'left',
  originY: 'top',
  left: 0,
  top: bgTop
});

如果我然后执行类似的操作：console.log（bgImg.backgroundImage）我得到null作为结果。对于canvas元素的所有其他属性，我得到对象返回或值，如果我想要宽度例如 - 所以所有其他属性都可以工作。 backgroundImage不起作用的原因是什么？

非常感谢任何帮助。

非常感谢，迈克尔

Answer 1

这是因为当你尝试使用console.log（）;

显示时，setBackgroundImage没有完成（异步）

HTML：

<canvas width="320" height="510" id="canvas"></canvas>
<button id="click">Click here !</button>

Javascript：

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

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

var bgImg = canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
    width: 320,
    height: 510,
    originX: 'left',
    originY: 'top',
    left: 0,
    top: 0
});

document.getElementById("click").addEventListener("click", function () {
    console.log(bgImg.backgroundImage);
});

在此示例中，当您单击按钮时，canvas.backgroundImage将显示在控制台中：http://jsfiddle.net/LOLKFC/PQe5e/

获取backgroundImage对象

1 个答案: