Tạo bối cảnh 2d * mà không cần * canvas

Question

Tôi hiện đang tìm cách tạo ngữ cảnh kết xuất canvas 2d mà không thực sự có phần tử canvas trên trang. Tôi có thể tự động tạo một phần tử canvas và ẩn nó, nhưng sau đó một lần nữa tôi không muốn hiển thị hình ảnh trực tiếp cho người dùng bất cứ lúc nào, do đó, không có điểm thực sự có phần tử canvas trong trang. Vì vậy, tôi về cơ bản tìm kiếm cái gì đó tương tự như

var image = new Image(); 

nhưng chỉ cho vải 2d vẽ bối cảnh (pseudo code)

var context = new 2dContext(); 

Có chức năng như thế này? Tôi đã không thể tìm thấy bất cứ điều gì giống như nó. Gọi

var context = new CanvasRenderingContext2D(); 

đó là tên của giao diện bối cảnh vẽ bằng HTML5 đặc tả chỉ mang lại cho tôi lỗi vụng về trong 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

Có thể sử dụng một tấm vải mà không hiển thị nó trên trang. Bạn có thể làm như sau:

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

Một khi bạn đã sử dụng vải, bạn có thể tất nhiên thêm nó vào tài liệu

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

Hoặc bạn có thể làm cho một hình ảnh từ nó:

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

Hoặc bạn có thể truy cập dữ liệu canvas dưới dạng giá trị với:

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

Điều thú vị là, nếu bạn tạo một đối tượng canvas và lưu trữ ngữ cảnh của nó trong một biến, biến đó có con trỏ riêng của nó đến đối tượng canvas. Vì bạn không thể sử dụng getContext ("2d") không có canvas, bạn cũng có thể chỉ có một con trỏ canvas. Nếu bạn giống như tôi và ghét việc có một tài liệu tham khảo hai đến cùng một đối tượng, bạn có thể làm điều này:

gốc:

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

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

Những gì tôi đang nói về:

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

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

Bây giờ bạn có thể làm tất cả các công cụ canvas quan trọng của mình thông qua biến ngữ cảnh. Sau khi tất cả, bối cảnh được truy cập thường xuyên hơn so với biến canvas. Khi bạn cần nó chỉ cần tham khảo nó thông qua bối cảnh:

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

Và nếu bạn không muốn bận tâm với khung vẽ chỉ để biến một mình, nó không giống như bạn muốn sử dụng nó.

Answer 3

Làm thế nào về: OffscreenCanvas()?

Và câu trả lời có lẽ là không, vì điều này chỉ được hỗ trợ trong Firefox 44.0+ hiện tại.

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

(Added để tham khảo ở đây, vì điều này cũng có thể mới với spec từ câu hỏi này đã được hỏi hơn 6 năm về trước! Và hy vọng sẽ được chấp nhận rộng rãi hơn)