इसलिए मैं विभिन्न आकार के कैनवस प्रदर्शित करने के लिए 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>

और वह पृष्ठभूमि प्राप्त करें जो मुझे चाहिए लेकिन जब मैं कोई वस्तु जोड़ने जाता हूं तो वे पृष्ठभूमि के पीछे दिखाई देते हैं। मैं छवि को टेक्स्ट और छवियों जैसे जोड़े गए ऑब्जेक्ट्स के पीछे कैसे मजबूर कर सकता हूं?

अग्रिम में धन्यवाद।

0
anonymoose 12 जून 2017, 17:49

2 जवाब

सबसे बढ़िया उत्तर

इनलाइन शैली विशेषता का उपयोग करके कैनवास की पृष्ठभूमि छवि सेट करने के बजाय, इसे अपनी सीएसएस फ़ाइल में सेट करें, जैसे ...

#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>
1
ɢʀᴜɴᴛ 12 जून 2017, 21:14

ठीक काम करने लगता है?

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);
0
Emil S. Jørgensen 12 जून 2017, 18:08