Question

我目前正在寻找一种方法来创建画布2d渲染上下文，而实际上页面上没有画布元素。我可以动态创建一个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

Answer 2

有趣的是，如果您创建一个canvas对象并将其上下文存储在一个变量中，那么该变量就有自己的指向canvas对象的指针。由于您不能在没有画布的情况下使用getContext（“2d”），因此您可能只有一个画布指针。如果你像我一样并且讨厌对同一个对象进行两次引用，那么你可以这样做：

原件：

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

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

我在说什么：

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

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

现在，您可以通过上下文变量完成所有重要的画布。毕竟，上下文的访问频率比canvas变量更多。当你确实需要时，只需通过上下文引用它：

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

如果你不想打扰画布只是单独留下变量，那就不像你想要使用它了。

Answer 3

怎么样：OffscreenCanvas（）？

答案可能不是，因为目前只支持Firefox 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

（在这里添加以供参考，因为这个问题可能是新的规范，因为这个问题是在6年多前被问到的！并且希望将被更广泛地采用）

创建2d上下文，不带 canvas

3 个答案:

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

3 个答案:

创建2d上下文，不带 canvas