2d bağlamı oluştur * * kanvassız

Question

Şu anda sayfada bir kanvas öğesi olmadan bir çerçeve 2d oluşturma bağlamı oluşturmanın bir yolunu arıyorum. Dinamik olarak bir tuval öğesi oluşturabilir ve gizleyebilirim, ancak yine de görüntüyü istediğim zaman kullanıcıya doğrudan göstermek istemiyorum, bu yüzden sayfada bir tuval öğesi bulundurmanın bir anlamı yok. Yani temel olarak

var image = new Image(); 

benzer ama sadece tuval 2d oluşturma bağlamında (sözde kod) içindir şey arıyorum

var context = new 2dContext(); 

işlevselliği böyle var mı? Böyle bir şey bulamadım. HTML5 spec tarafından render bağlam arayüzünün adı olan

var context = new CanvasRenderingContext2D(); 

çağrılması sadece Firefox'ta bana garip hatalar veriyor:

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

sayfada görüntülemeden bir tuval kullanmak mümkündür. Aşağıdaki yapabilirdi: Eğer tuval kullandıktan sonra

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

, elbette belgenin

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

ekleyebilirsiniz Yoksa ondan bir görüntü yapabiliriz:

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

Veya ile değerleri gibi tuval verilere erişmek olabilir:

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

Bir tuval nesnesi oluşturup içeriğini bir değişkende saklarsanız, bu değişkenin tuval nesnesine kendi göstericisine sahip olması ilginçtir. Bir tuval olmadan getContext ("2d") kullanamayacağınız için, sadece bir tuval işaretçiniz olabilir. Eğer benim gibi ve aynı nesneye iki başvuru sahip nefret, bu yapabilirdi:

Orijinal: Artık

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. 

bahsettiğimi ne Tüm önemli tuval malzemelerini içerik değişkeni ile yapabilirsiniz. Sonuçta, içerik tuval değişkeninden daha sık erişilir.

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

Ve tuval ile rahatsız etmek istemiyorsanız yalnız değişkeni bırakın, yine de kullanmak istedi gibi değil: İhtiyaç yaptığınızda sadece bağlam aracılığıyla başvuru.

Answer 3

Ne dersin: OffscreenCanvas()?

Ve yanıt muhtemelen hayır, çünkü bu yalnızca Firefox 44.0+ sürümünde destekleniyor.

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

(bu iyi bu soru fazla 6 yıl önce istendi! Ve umarım daha yaygın olarak kabul edilecek beri spec için yeni olabilir gibi burada referans eklendi