Canvas 背景不在物体后面

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

不要使用内联样式属性设置 canvas 的背景图像，而是在 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

似乎工作正常？

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);

Canvas 背景不在物体后面

Canvas background not behind objects

javascript

css

canvas

fabricjs