2 डी संदर्भ बनाएं * बिना * कैनवास

Question

मैं वर्तमान में पृष्ठ पर कैनवास तत्व के बिना कैनवास 2 डी प्रतिपादन संदर्भ बनाने का एक तरीका ढूंढ रहा हूं। मैं गतिशील रूप से एक कैनवास तत्व बना सकता हूं और इसे छुपा सकता हूं, लेकिन फिर मैं छवि को किसी भी समय सीधे छवि नहीं दिखाना चाहता, इसलिए पृष्ठ में वास्तव में कैनवास तत्व होने का कोई मतलब नहीं है। इसलिए मैं मूल रूप से कुछ है कि

var image = new Image(); 

के समान है, लेकिन केवल कैनवास 2 डी प्रतिपादन संदर्भ (छद्म कोड) के लिए है के लिए देख रहा हूँ

var context = new 2dContext(); 

इस तरह कार्यक्षमता वहाँ है? मैं ऐसा कुछ भी नहीं ढूंढ पाया। कॉलिंग

var context = new CanvasRenderingContext2D(); 

जो एचटीएमएल 5 कल्पना द्वारा प्रतिपादन संदर्भ इंटरफेस का नाम है बस मुझे अजीब त्रुटियों देता है फ़ायरफ़ॉक्स में:

uncaught exception: [Exception... "Cannot convert WrappedNative to function" nsresult: "0x8057000d (NS_ERROR_XPC_CANT_CONVERT_WN_TO_FUN)" location: "JS frame :: http://localhost/ :: <TOP_LEVEL> :: line 25" data: no] 

Answer 1

यह पृष्ठ पर प्रदर्शित किए बिना एक कैनवास उपयोग करना संभव है। आप निम्न कर सकता है: एक बार जब आप कैनवास का उपयोग किया है

// Create a canvas element 
var canvas = document.createElement('canvas'); 
canvas.width = 500; 
canvas.height = 400; 

// Get the drawing context 
var ctx = canvas.getContext('2d'); 

// Then you can do stuff, e.g.: 
ctx.fillStyle = '#f00'; 
ctx.fillRect(20,10,80,50); 

, तो आप निश्चित रूप से यह दस्तावेज़

var element = document.getElementById('canvas_container'); 
element.appendChild(canvas); 

को जोड़ सकते हैं या आप इसे से एक छवि बना सकता है:

var new_image_url = canvas.toDataURL(); 
var img = document.createElement('img'); 
img.src = new_image_url; 

या के रूप में के साथ महत्व देता है आप कैनवास डेटा का उपयोग कर सकते हैं:

var image_data = ctx.getImageData(0,0,canvas.width,canvas.height); 
var rgba_byte_array = image_data.data; 
rgba_byte_array[0]; // red value for first pixel (top left) in the canvas 

Answer 2

दिलचस्प बात यह है कि, यदि आप कैनवास ऑब्जेक्ट बनाते हैं और इसके संदर्भ को एक चर में संग्रहीत करते हैं, तो उस चर के पास कैनवास ऑब्जेक्ट का अपना पॉइंटर होता है। चूंकि आप कैनवास के बिना getContext ("2d") का उपयोग नहीं कर सकते हैं, इसलिए आपके पास केवल एक कैनवास पॉइंटर हो सकता है। तुम मुझे पसंद कर रहे हैं और एक ही वस्तु के लिए एक दो संदर्भों होने से नफरत है, तो आप ऐसा कर सकते हैं:

मूल:

var context=document.createElement("canvas").getContext("2d"); 

alert(context.canvas);// The canvas object. 

अब:

var canvas=document.createElement("canvas"); 
var context=canvas.getContext("2d"); 

alert(Boolean(context.canvas==canvas));// true. 

क्या मैं के बारे में बात कर रहा हूँ आप संदर्भ चर के माध्यम से अपने सभी महत्वपूर्ण कैनवास सामान कर सकते हैं। आखिरकार, कैनवास वैरिएबल से अधिक बार संदर्भ का उपयोग किया जाता है। जब आप यह आवश्यकता है केवल संदर्भ के माध्यम से इसे संदर्भ:

context.canvas.width=320; 
context.canvas.height=320; 
document.body.appendChild(context.canvas); 

और अगर आप कैनवास के साथ परेशान नहीं करना चाहते सिर्फ अकेले चर छोड़ देते हैं, यह आप की तरह नहीं है फिर भी इसका उपयोग करना चाहता था।

Answer 3

कैसे: OffscreenCanvas()?

और उत्तर शायद नहीं है, क्योंकि यह केवल फ़ायरफ़ॉक्स 44.0+ में समर्थित है।

var offscreen = new OffscreenCanvas(256, 256); 

https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

https://html.spec.whatwg.org/multipage/scripting.html#the-offscreencanvas-interface

(संदर्भ के लिए जोड़े गए यहाँ, के रूप में यह अच्छी तरह से कल्पना के बाद से इस सवाल का अधिक से अधिक 6 साल पहले कहा गया था! और उम्मीद है कि अधिक व्यापक रूप से अपनाई जाएगी करने के लिए नए हो सकता है)