javascript - 创建 2d context *without* canvas

Question

我目前正在寻找一种方法来创建 Canvas 2d 渲染上下文，而无需在页面上实际使用 Canvas 元素。我可以动态创建一个 canvas 元素并隐藏它，但我又不想在任何时候直接向用户显示图像，因此在页面中实际拥有 canvas 元素没有意义。所以我基本上是在寻找类似于

的东西

var image = new Image( );

但只针对canvas 2d渲染上下文(伪代码)

var context = new 2dContext( );

有这样的功能吗？我找不到类似的东西。呼唤

var context = new CanvasRenderingContext2D( );

这是 HTML5 规范的呈现上下文接口(interface)的名称，这让我在 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

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

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

一旦你使用了 Canvas ，你当然可以将它添加到文档中

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;

或者您可以通过以下方式访问 Canvas 数据作为值:

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