Utwórz kontekst 2d * bez * canvas

Question

Obecnie poszukuję sposobu na utworzenie kontekstu renderowania kanwy 2d bez konieczności posiadania elementu canvas na stronie. Mógłbym dynamicznie utworzyć element canvas i ukryć go, ale potem znowu nie chcę wyświetlać obrazu bezpośrednio użytkownikowi, więc nie ma sensu, aby element canvas był na stronie. Więc jestem w zasadzie patrząc na coś, co jest podobne do

var image = new Image(); 

ale tylko na płótno 2d kontekstu renderowania (pseudo kodu)

var context = new 2dContext(); 

Czy istnieje funkcjonalność jak to? Nie mogłem znaleźć czegoś takiego. Wywołanie

var context = new CanvasRenderingContext2D(); 

który jest nazwą renderowania interfejsu kontekstowego według specyfikacji HTML5 po prostu daje mi błędy niewygodnych 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

Jest możliwe użycie płótna bez wyświetlania go na stronie. Można wykonać następujące czynności:

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

Po stosować płótno, można oczywiście dodać go do dokumentu

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

Albo można zrobić zdjęcie z nim:

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

Albo można uzyskać dostęp do danych z płótna jako wartości:

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

Co ciekawe, jeśli utworzysz obiekt canvas i zapiszesz jego kontekst w zmiennej, ta zmienna ma swój własny wskaźnik do obiektu canvas. Ponieważ nie można używać getContext ("2d") bez płótna, równie dobrze można mieć tylko jeden wskaźnik canvas. Jeśli jesteś podobny do mnie i nienawidzę posiadające dwa odwołania do tego samego obiektu, można to zrobić:

oryginalny:

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

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

Co mówię:

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

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

teraz możesz zrobić wszystkie ważne rzeczy na płótnie za pomocą zmiennej kontekstowej. W końcu kontekst jest dostępny częściej niż zmienna canvas. Kiedy trzeba go po prostu odwoływać poprzez kontekście:

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

A jeśli nie chcesz męczyć się z płótna po prostu zostawić zmienną sam, to nie jest tak, jak chcesz go używać w każdym razie.

Answer 3

Co powiesz na: OffscreenCanvas()?

Odpowiedź brzmi prawdopodobnie nie, ponieważ obecnie jest obsługiwana tylko w Firefoksie 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

(Dodano odniesienie tutaj, ponieważ może to dobrze być nowym spec od tego pytano więcej niż 6 lat temu! I mam nadzieję, że będzie bardziej powszechnie przyjętym)