如何在三个js渲染画布中为画布添加结束标记？ [英] How to add closing tag for canvas in three js rendered Canvas?

问题描述

三个js总是在页面上添加没有结束标记的canvas元素，背后是否有任何具体原因？

three js always adds canvas elements without a closing tag to the page, is there any specific reason behind that?

我想在这个画布上添加一个结束标记元素。

I want to add a closing tag on this canvas element.

为什么我希望这个结束标记可能很愚蠢，我正在尝试使用

Why I want this closing tag might be silly, I am trying to get the context using

context = canvas.getContext('2d');

但它返回null，所以尝试了一些解决方案，没有工作，遇到了这个答案，所以我怀疑丢失的结束标签可能是一个问题。

But it returns null , so tried some solutions here, none worked and Came across this answer, So I suspect the missing closing tag may be an issue.

什么实际上我想要的是使用这个将画布保存到图像。

What actually I am trying to do is save the canvas to an image using this.

推荐答案

@ K3N的upvoted答案是正确的一点：你的问题不是来自< / canvas> 结束标记未在检查器中显示，但是从您的试用版中获取已经初始化了webgl的画布的2D上下文。

@K3N's upvoted answer's is right about one point : your problem doesn't come from the </canvas> closing tag not shown in the inspector, but from your trial to get a 2D Context from a canvas where a webgl one was already initialized.

虽然在HTML5中确实如此某些元素不需要结束标记。 HTML＃conce pt-element-tag-omissionrel =nofollow noreferrer> canvas

While it's true that in HTML5 some elements don't need a closing tag, for canvas

标签中的遗漏/ html：

      两个标记都不可省略。

Tag omission in text/html:
      Neither tag is omissible.

以下是其他小提琴的小反证，因为是，< script> 内容应该在遇到时直接执行，并且现代浏览器在满足结束标记之前使canvas元素在DOM中可用，这些浏览器能够执行这个简单的脚本，（IE9不会）但这肯定是你想要避免的：

Here is a small counter-proof to the other fiddle, since yes, <script> content should be executed directly when met, and that modern browsers make the canvas element available in the DOM before they met the closing tag, these browsers are able to execute this simple script, (IE9 won't be) but this is certainly something you want to avoid :

canvas{border: 1px solid}

<canvas>
<p>I'm not there</p>

所以它只是你的检查员，或者你的浏览器内部没有显示它，但你必须写它在你的标记中。

（实际上，如果我们谈论的是chrome，它只是检查员没有显示它，你可以通过调用 outerHTML看到它 canvas元素的属性，结束标记将在那里。）

So it's just your inspector, or maybe internally your browser which doesn't show it, but you must write it in your markup.
(Actually, if we're talking about chrome, it's only the inspector which doesn't show it, you can see it by calling the outerHTML property of the canvas element, the closing tag will be there.)

您要做的是将画布导出为静态图像。

为此，因为 toBlob 是一个HTMLCanvasElement的方法，你不是需要当前的上下文，你只需要答案的最后部分你在我的问题和小调整中指出了我们：

What you are trying to do is to export the canvas as a static image.
For this, since toBlob is an HTMLCanvasElement's method, you don't need the current context , you only need the last part of the answer you pointed us to in your question, and small adjustements :

在 此答案 gman ，webgl canvas是双缓冲的，并且图纸浏览器可以立即清除缓冲区，除非上下文是使用的创建上下文： getContext（）的参数创建的c $ c>方法。

但是这个参数会对性能产生严重影响，最好推荐的方法是调用 toBlob（）方法，在与渲染相同的调用中，同步。

As well explained in this answer by gman, webgl canvas is double buffered, and the drawing buffer will be cleared as soon as the browser can, except if the context was created with the preserveDrawingBuffer: true argument of the getContext() method.
But this argument will have a serious effect on performances, and the best recommended way, is to call the toBlob() method, in the same call as your rendering, synchronously.

由于它已经在那里得到了很好的解释，我不会在这个问题上做太多扩展，但请注意它也涉及 toDataURL（） 和 some2dCanvas.drawImage（yourWebglCanvas，x，y）。

Since it is already really well explained there, I won't extend too much on this subject, but note that it also concerns toDataURL() and some2dCanvas.drawImage(yourWebglCanvas,x,y).

这篇关于如何在三个js渲染画布中为画布添加结束标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！