创建2d上下文*,不带*canvas

Question

我目前正在寻找一种方法来创建一个画布2d渲染上下文,而不实际在页面上有一个canvas元素.我可以动态创建一个canvas元素并隐藏它,但是我再次不想直接向用户显示图像,所以在页面中实际上没有画布元素.所以我基本上在寻找类似的东西

var image = new Image( );

但仅适用于canvas 2d渲染上下文(伪代码)

var context = new 2dContext( );

有这样的功能吗？我无法找到类似的东西.调用

var context = new CanvasRenderingContext2D( );

这是HTML5规范的渲染上下文界面的名称只是让我在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

可以使用画布而不在页面上显示它.您可以执行以下操作:

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