Question

所以我使用fabric.js和一些单独的.php页面来显示不同大小的画布。在一个页面上我有：

<canvas width="792" height="1008" id="c" style="background: url('./images/backgrounds/AmericanFlagBackground11x14.jpg')"></canvas>

在另一页上我有：

<canvas width="792" height="1008" id="c" style="background: url('./images/backgrounds/AmericanFlagBackground16x20.jpg')"></canvas>

并获得我想要的背景但是当我去添加一个它们在背景后面产生的对象时。如何强制图像在文本和图像等添加的对象后面？

提前致谢。

Answer 1

不是使用内联样式属性设置画布的背景图像，而是将其设置在css文件中，如此...

#c {
   background: url(./images/backgrounds/AmericanFlagBackground11x14.jpg)
}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
   top: 100,
   left: 100,
   width: 100,
   height: 100,
   fill: '#07C',
   originX: 'center',
   originY: 'center'
});
canvas.add(rect);

#c {
   background: url(http://i.imgur.com/Q6aZlme.jpg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

Answer 2

似乎工作正常？

＆＃13;

var canvas = document.body.appendChild(document.createElement("canvas"));
canvas.style.backgroundImage = "url('https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100')";
setTimeout(function() {
  canvas.getContext("2d").fillRect(10, 10, 1000, 1000);
}, 1000 * 2);

＆＃13;

画布背景不在对象后面

2 个答案: