是否可以在Canvas或WebGL中呈现HTML元素？ （类似于如何在WebGL中绘制视频元素纹理）
答案 0 :(得分：12)
答案 1 :(得分：4)
不，目前还不可能，还没有。 但是计划在a video from 3rd WebGL Camp (at about 6:44)中指出这个功能。
答案 2 :(得分：4)
您还应该查看http://robert.ocallahan.org/2011/11/drawing-dom-content-to-canvas.html
它可能会在Chrome中引发安全错误，但在Firefox中运行良好。
答案 3 :(得分：1)
使用此库https://github.com/PixelsCommander/HTML-GL就像使用<html-gl>标记打包您的内容一样简单。
答案 4 :(得分：1)
我只是想加上原因。
这与脏画布和WebGL发布后不久修复的定时攻击相同。
使用canvas 2d，您可以使用ctx.drawImage(someImage, ...)将图像绘制到画布中;问题来自跨域图像。通常，JavaScript无法读取图像内的像素。它可以读取画布内的像素。因此，要从图像中获取像素，首先将图像绘制到画布，然后从画布中读取像素ctx.getImageData(...)
这是跨域图像（来自页面域以外的域的图像）的安全问题。
canvas 2d的解决方案是您将跨域图像绘制到2d画布中的那一刻，画布在内部标记为 dirty ，并且ctx.getImageData和canvas.toDataURL都将抛出安全错误。
最初WebGL遵循相同的规则。如果您使用跨域图像或脏画布调用gl.texImageXXX，则webgl画布将标记为 dirty ，而gl.readPixels以及canvas.toDataURL将无效。
聪明的人指出，在WebGL的情况下，这还不够，因为即使你不能调用gl.readPixels，你也可以设计一个着色器，根据它访问的纹理颜色花费更多时间。使用它可以计算访问纹理像素所需的时间并有效地重建图像的内容。
解决方案是WebGL默认不允许交叉原始图像。相反，您必须从其他服务器请求CORS（跨源资源共享）权限。只有授予权限，WebGL才能使用该图像。
好的，毕竟有希望你可以看到为什么你不能将HTML呈现到WebGL中。如果您可以将HTML呈现为画布，那么您可以使用上述技术来阅读该HTML的内容，包括嵌入式iframe等，脏画布，来自其他域的图像等......