Crea contesto 2d * senza * area di lavoro

Question

Attualmente sto cercando un modo per creare un contesto di rendering 2D di una tela senza effettivamente avere un elemento canvas nella pagina. Potrei creare dinamicamente un elemento canvas e nasconderlo, ma di nuovo non voglio mostrare l'immagine direttamente all'utente in qualsiasi momento, quindi non ha senso avere un elemento canvas nella pagina. Quindi sono fondamentalmente alla ricerca di qualcosa che è simile a

var image = new Image(); 

ma solo per tela 2d contesto di rendering (pseudo codice)

var context = new 2dContext(); 

C'è funzionalità come questo? Non ero in grado di trovare nulla di simile. Chiamando

var context = new CanvasRenderingContext2D(); 

che è il nome dell'interfaccia contesto di rendering da HTML5 spec appena mi dà errori imbarazzanti in Firefox:

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

E 'possibile utilizzare una tela senza visualizzare sulla pagina. Si potrebbe fare la seguente:

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

Una volta che hai usato la tela, naturalmente è possibile aggiungere al documento

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

Oppure si potrebbe fare un'immagine da esso:

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

Oppure si potrebbe accedere ai dati di tela come valori con:

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

È interessante notare che se si crea un oggetto canvas e si memorizza il suo contesto in una variabile, tale variabile ha il proprio puntatore all'oggetto canvas. Dato che non puoi usare getContext ("2d") senza una tela, potresti anche avere un solo puntatore su tela. Se siete come me e odio avere un due riferimenti allo stesso oggetto, si potrebbe fare questo:

originale:

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

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

cosa sto parlando:

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

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

Ora puoi fare tutte le tue cose importanti sulla tela attraverso la variabile di contesto. Dopotutto, il contesto è accessibile più spesso della variabile canvas. Quando si ha bisogno solo fare riferimento a esso attraverso il contesto:

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

E se non si vuole perdere tempo con la tela semplicemente lasciare la variabile da sola, non è come si voleva utilizzare comunque.

Answer 3

Che ne dite di: OffscreenCanvas()?

E la risposta è probabilmente no, dal momento che questo è supportato solo in Firefox 44.0+ attualmente.

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

(Aggiunto per riferimento qui, in quanto questo potrebbe essere una novità per le specifiche dal momento che questa domanda è stato chiesto più di 6 anni fa! E si spera verrà più ampiamente adottato)