एचटीएमएल 5 गतिशील रूप से कैनवास

Question

हाय बनाने मैं एक सवाल के बारे में JavaScript का उपयोग करके एक कैनवास बनाने की है।

मैं इस तरह एक कैनवास बनाने के लिए:

var canvas = document.createElement('canvas'); 
canvas.id  = "CursorLayer"; 
canvas.width = 1224; 
canvas.height = 768; 
canvas.style.zIndex = 8; 
canvas.style.position = "absolute"; 
canvas.style.border = "1px solid"; 

लेकिन जब मैं यह पता लगाने का प्रयास, मैं एक null मूल्य प्राप्त:

cursorLayer = document.getElementById("CursorLayer"); 

मैं इसे गलत कर रहा हूं? जावास्क्रिप्ट का उपयोग कर कैनवास बनाने का कोई बेहतर तरीका है?

Answer 1

समस्या यह है कि आप दस्तावेज़ के शरीर में अपने कैनवास तत्व सम्मिलित नहीं है।

बस निम्न कार्य करें:

document.body.appendChild(canvas); 

उदाहरण:

var canvas = document.createElement('canvas'); 
 

 
canvas.id = "CursorLayer"; 
 
canvas.width = 1224; 
 
canvas.height = 768; 
 
canvas.style.zIndex = 8; 
 
canvas.style.position = "absolute"; 
 
canvas.style.border = "1px solid"; 
 

 

 
var body = document.getElementsByTagName("body")[0]; 
 
body.appendChild(canvas); 
 

 
cursorLayer = document.getElementById("CursorLayer"); 
 

 
console.log(cursorLayer); 
 

 
// below is optional 
 

 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "rgba(255, 0, 0, 0.2)"; 
 
ctx.fillRect(100, 100, 200, 200); 
 
ctx.fillStyle = "rgba(0, 255, 0, 0.2)"; 
 
ctx.fillRect(150, 150, 200, 200); 
 
ctx.fillStyle = "rgba(0, 0, 255, 0.2)"; 
 
ctx.fillRect(200, 50, 200, 200);

Answer 2

वाया Jquery:

$('<canvas/>', { id: 'mycanvas', height: 500, width: 200}); 

http://jsfiddle.net/8DEsJ/736/

Answer 3

यह इसलिए होता है क्योंकि आप इसे पहले डोम भरी हुई है। सबसे पहले, तत्व बनाएं और इसमें एट्रिब्यूट जोड़ें, फिर डोम ने इसे लोड करने के बाद इसे कॉल किया है। आपके मामले में ऐसा लगता है कि तरह दिखना चाहिए:

var canvas = document.createElement('canvas'); 
canvas.id  = "CursorLayer"; 
canvas.width = 1224; 
canvas.height = 768; 
canvas.style.zIndex = 8; 
canvas.style.position = "absolute"; 
canvas.style.border = "1px solid"; 
window.onload = function() { 
    document.getElementById("CursorLayer"); 
}