javascript - 如何在三个 js 渲染的 Canvas 中为 Canvas 添加结束标记？

Question

三个js总是在页面添加不带结束标签的canvas元素，有什么具体原因吗？

我想在此 Canvas 元素上添加结束标记。

Example page ，检查页面显示，有些事情是这样的。

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

获取上下文

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

但它返回 null ，所以在这里尝试了一些解决方案，但都没有奏效并且遇到了 this answer , 所以我怀疑丢失的结束标记可能是个问题。

我实际上想做的是使用 this 将 Canvas 保存为图像.

Answer 1

@K3N 的赞成答案有一点是正确的:您的问题不是来自检查器中未显示的 </canvas> 结束标记，而是来自您尝试从已经初始化了 webgl 的 Canvas 中获取 2D 上下文。

---

但是，

虽然在 HTML5 中 some elements 确实不需要结束标签，但对于 canvas

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

这是对 other fiddle 的一个小反证，因为是的，<script> 内容应该在遇到时直接执行，并且现代浏览器在遇到结束标记之前使 canvas 元素在 DOM 中可用，这些浏览器能够执行这个简单的脚本，(IE9 不会)但这肯定是你想避免的事情:

canvas{border: 1px solid}

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

所以这只是您的检查器，或者可能是您的浏览器内部没有显示它，但是您必须将它写在您的标记中。
(实际上，如果我们谈论的是 chrome，只是检查器没有显示它，您可以通过调用 canvas 元素的 outerHTML 属性来查看它，结束标记将在那里。)

对于解决方案，

您要做的是将 Canvas 导出为静态图像。
为此，由于 toBlob 是 HTMLCanvasElement 的方法，您不需要当前上下文，您只需要您在问题中指出我们的 the answer 的最后一部分，以及小的调整:

正如 this answer 在 gman 中所解释的那样，webgl canvas 是双缓冲的，绘图缓冲区将在浏览器可以清除时立即清除，除非上下文是使用 preserveDrawingBuffer: true 方法的 getContext() 参数创建的。
但是这个参数会对性能产生严重影响，最好的推荐方法是在与渲染相同的调用中同步调用 toBlob() 方法。

因为那里已经很好地解释了，所以我不会在这个主题上展开太多，但请注意它也涉及 toDataURL() 和 some2dCanvas.drawImage(yourWebglCanvas,x,y) 。