javascript 创建2d上下文*没有*画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3892010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create 2d context *without* canvas
提问by Daniel Baulig
I am currently looking for a way to create a canvas 2d rendering context without actually having a canvas element on the page. I could dynamically create a canvas element and hide it, but then again I don't want to show the image directly to the user anytime, so there's no point of actually having a canvas element in the page. So I'm basicly looking for something that is similar to
我目前正在寻找一种方法来创建画布 2d 渲染上下文，而实际上页面上没有画布元素。我可以动态地创建一个画布元素并将其隐藏，但是我又不想在任何时候直接向用户显示图像，所以在页面中实际拥有一个画布元素是没有意义的。所以我基本上是在寻找类似于
var image = new Image( );
but only for canvas 2d rendering context (pseudo code)
但仅适用于画布 2d 渲染上下文（伪代码）
var context = new 2dContext( );
Is there functionality like this? I wasn't able to find anything like it. Calling
有这样的功能吗？我找不到类似的东西。打电话
var context = new CanvasRenderingContext2D( );
which is the name of the rendering context interface by HTML5 spec just gives me awkward errors in Firefox:
这是 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]
回答by andrewmu
It is possible to use a canvas without displaying it on the page. You could do the following:
可以使用画布而不在页面上显示它。您可以执行以下操作：
// 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);
Once you've used the canvas, you can of course add it to the document
使用画布后，您当然可以将其添加到文档中
var element = document.getElementById('canvas_container');
element.appendChild(canvas);
Or you could make an image from it:
或者您可以从中制作图像：
var new_image_url = canvas.toDataURL();
var img = document.createElement('img');
img.src = new_image_url;
Or you could access the canvas data as values with:
或者您可以使用以下值访问画布数据：
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
回答by user_poth
Interestingly enough, if you create a canvas object and store its context in a variable, that variable has its own pointer to the canvas object. Since you can't use getContext("2d") without a canvas, you might as well only have one canvas pointer. If you're like me and hate having a two references to the same object, you could do this:
有趣的是，如果您创建一个画布对象并将其上下文存储在一个变量中，则该变量有自己的指向画布对象的指针。由于您不能在没有画布的情况下使用 getContext("2d")，因此您最好只有一个画布指针。如果你像我一样讨厌对同一个对象有两个引用，你可以这样做：
Original:
原来的：
var canvas=document.createElement("canvas");
var context=canvas.getContext("2d");
alert(Boolean(context.canvas==canvas));// true.
What I'm talking about:
我在说什么：
var context=document.createElement("canvas").getContext("2d");
alert(context.canvas);// The canvas object.
Now you can do all of your important canvas stuff through the context variable. After all, context is accessed more often than the canvas variable. When you do need it just reference it through the context:
现在您可以通过上下文变量完成所有重要的画布内容。毕竟，上下文比 canvas 变量的访问频率更高。当您确实需要它时，只需通过上下文引用它：
context.canvas.width=320;
context.canvas.height=320;
document.body.appendChild(context.canvas);
And if you don't want to bother with the canvas just leave the variable alone, it's not like you wanted to use it anyway.
如果您不想打扰画布，只需将变量放在一边，反正您也不想使用它。
回答by David L Morris
How about: OffscreenCanvas()?
怎么样：OffscreenCanvas()？
And the answer is probably no, since this is only supported in Firefox 44.0+ currently.
答案可能是否定的，因为目前仅 Firefox 44.0+ 支持此功能。
var offscreen = new OffscreenCanvas(256, 256);
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas
https://html.spec.whatwg.org/multipage/scripting.html#the-offscreencanvas-interface
https://html.spec.whatwg.org/multipage/scripting.html#the-offscreencanvas-interface
(Added for reference here, as this may well be new to the spec since this question was asked more than 6 years ago! And hopefully will be more widely adopted)
（在此处添加以供参考，因为这对于规范来说很可能是新的，因为这个问题是在 6 多年前提出的！希望能被更广泛地采用）
