एचटीएमएल 5 कैनवास सेट जेड-इंडेक्स

Question

क्या एचटीएमएल 5 कैनवास में खींची गई वस्तु के जेड-इंडेक्स को सेट करना संभव है?

मैं पाने के लिए यह इतना एक वस्तु एक "खिलाड़ी" के सामने हो सकता है कोशिश कर रहा हूँ और एक अन्य वस्तु "खिलाड़ी"

Answer 1

हाँ की Yes..kind। आप मौजूदा पिक्सेल "पीछे खींचने" के लिए कंपोजिटिंग का उपयोग कर सकते हैं।

ctx.globalCompositeOperation='destination-over'; 

यहाँ एक उदाहरण है और एक डेमो है:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var cx=100; 
 

 
drawCircle() 
 
cx+=20; 
 

 
ctx.globalCompositeOperation='destination-over'; 
 

 
$("#test").click(function(){ 
 
    drawCircle(); 
 
    cx+=20; 
 
}); 
 

 
function drawCircle(){ 
 
    ctx.beginPath(); 
 
    ctx.arc(cx,150,20,0,Math.PI*2); 
 
    ctx.closePath(); 
 
    ctx.fillStyle=randomColor(); 
 
    ctx.fill(); 
 
} 
 

 
function randomColor(){ 
 
    return('#'+Math.floor(Math.random()*16777215).toString(16)); 
 
}

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id="test">Draw new circle behind.</button><br> 
 
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

क्षमा पीछे है, लेकिन नहीं, कैनवास तत्व अपनी z- सूचकांक है और होगा उस पर खींचा गया कुछ भी उस परत पर होगा।

यदि आप कैनवास पर विभिन्न चीजों का जिक्र कर रहे हैं तो हाँ, जो कुछ भी खींचा गया है, वह पहले जो कुछ भी था, उसके ऊपर खींचा गया है।

Answer 3

बस इसके पीछे चीजें, फिर चीज, फिर अन्य वस्तुओं को खींचें।

हिट परीक्षण करने के लिए आपको प्रत्येक ऑब्जेक्ट का परीक्षण करने, अपनी प्रदर्शन सूची में पीछे की ओर फिर से चलाने की आवश्यकता हो सकती है। यदि आप वस्तु सीमाओं को वास्तव में अच्छी तरह से जानते हैं तो यह काम करेगा।

या आप कुछ ऑब्जेक्ट्स को ड्राइंग करने की कोशिश कर सकते हैं जैसे एक ही ऑब्जेक्ट को अन्य ऑब्जेक्ट कैनवास में खींचना, जिसमें प्रत्येक ऑब्जेक्ट के लिए अद्वितीय रंग होते हैं: परीक्षण करने के लिए बस इन-मेमोरी कैनवास पर पिक्सेल रंग की जांच करें। साफ ;-)

Answer 4

एक समाधान जो मैंने पाया है मेरे लिए काम करता है (और झटके से छुटकारा पाता है, hurray!) दो कैनवास का उपयोग करना है। (या अधिक)

मुझे लगता है कि आप किसी प्रकार का खेल बना रहे हैं (क्योंकि आप एक खिलाड़ी का जिक्र करते हैं) और इसे उदाहरण के रूप में उपयोग करते हैं।

आप विंडोज़ के काम से एक पृष्ठ ले सकते हैं और एक कैनवास को पृष्ठभूमि के रूप में पहले अपने कैनवास के रूप में एक और कैनवास के साथ रख सकते हैं। आप प्लेयर कैनवास को 'गंदे' के रूप में चिह्नित कर सकते हैं या जब भी इसे बदल दिया जाता है तो बदल दिया जाता है और आवश्यकता होने पर केवल बदली हुई परत को फिर से खींचा जा सकता है। इसका मतलब है कि जब आप अपना खिलाड़ी चलता है या कोई कार्रवाई करता है तो आप केवल दूसरे कैनवास को अपडेट करते हैं।

इस विधि को और भी आगे ले जाया जा सकता है और आप एचडीयू के लिए गेमप्ले आंकड़ों के साथ एक तीसरा कैनवास जोड़ सकते हैं जो खिलाड़ी के आंकड़े बदलते समय ही बदल जाते हैं।

एचटीएमएल कुछ इस तरह दिख सकता है:

<canvas id="background-canvas" height="500" width="1000" style="border:1px solid #000000;"></canvas> 
<canvas id="player-canvas" height="500" width="1000" style="border:1px solid #000000;"></canvas> 
<canvas id="hud-canvas" height="500" width="1000" style="border:1px solid #000000;"></canvas> 

Answer 5

या आप बस एक सरणी अपने वस्तुओं से युक्त तो तैयार हो इस सरणी की zIndex संपत्ति का उपयोग कर इस्तेमाल कर सकते हैं सॉर्ट प्रत्येक बच्चा फिर आप उस सरणी को खींचें और ड्रा करें।

var canvas = document.querySelector('#game-canvas'); 
var ctx = canvas.getContext('2d'); 

// Define our shape "class". 
var Shape = function (x, y, z, width, height) { 
    this.x = x; 
    this.y = y; 
    this.zIndex = z; 
    this.width = width; 
    this.height = height; 
}; 
// Define the shape draw function. 
Shape.prototype.draw = function() { 
    ctx.fillStyle = 'lime'; 
    ctx.fillRect(this.x, this.y, this.width, this.height); 
}; 

// let's store the objects to be drawn. 
var objects = [ 
    new Shape(10, 10, 0, 30, 30), // should be drawn first. 
    new Shape(50, 10, 2, 30, 30), // should be drawn third. 
    new Shape(90, 10, 1, 30, 30) // should be drawn second. 
]; 

// For performance reasons, we will first map to a temp array, sort and map the temp array to the objects array. 
var map = objects.map(function (el, index) { 
    return { index : index, value : el.zIndex }; 
}); 

// Now we need to sort the array by z index. 
map.sort(function (a, b) { 
    return a - b; 
}); 

// We finaly rebuilt our sorted objects array. 
var objectsSorted = map.map(function (el) { 
    return objects[el.index]; 
}); 

// Now that objects are sorted, we can iterate to draw them. 
for (var i = 0; i < objectsSorted.length; i++) { 
    objectsSorted[i].draw(); 
} 

// Enjoy ! 

नोट है कि मैं अपने सेलफोन पर कि कोड का परीक्षण किया फ्लॉप और यह लिखा था, इसलिए वहाँ लिखने की त्रुटियों हो सकता है, लेकिन यह है कि ऐसा करना चाहिए परमिट सिद्धांत को समझने के लिए, मैं उम्मीद है।