如何将HTML文件加载到画布？ [英] How to load a HTML file into canvas?
问题描述
我知道我们可以将图像加载到画布中，但我不知道我们是否能够将一个简单的HTML文件加载到画布中。
简短答案：
<不，你不能。
长回答：
不可靠，但是你可以在某些（可能是黑客）的方式。关键在于你定义为一个形象。你知道你可以使用 drawImage（）添加一个图像到canvas中 - 你可能不知道的是什么图像可以（不一定是实际图像）。
首先，图像可以是HTML5视频元素 - 因此您可以将视频添加到画布。
其次，在大多数现代浏览器中，image可以是SVG文档，它可以通过SVG < foreignObject> 元素包含HTML。
浏览器支持：
- SVG文档
drawImage ）目前不支持在Firefox中。 相关错误在这里，我认为已计划修复。 -
< foreignObject>在大多数浏览器中都是错误的 - Firefox（讽刺）似乎有最好的支持。
示例：
svg xmlns =http://www.w3.org/2000/svg>
< foreignObject x =0y =0height =800width =800>
< body xmlns =http://www.w3.org/1999/xhtml>
< p> Hello world！< / p>
< input type =date/>
< / body>
< / foreignObject>
< / svg> 尝试使用画布加载该文件 drawImage / code>在Opera - 因为你会看到它的交互性是相当bug，但显示很好。
I know we can load an image into a canvas but I wonder if we are able to load a simple HTML file into a canvas. If yes, how?
Thanks.
Short answer: No, you cannot.
Long answer:
Not reliably, BUT yes you can in certain (possibly hackish) ways. The key is in what you define as an "image". You are aware that you can add an image to the canvas with drawImage() - what you mightn't be aware of is what that "image" can be (not necessarily an actual image).
Firstly, the "image" can be a HTML5 video element - so you can add videos to the canvas.
Secondly, in most modern browsers the "image" can be an SVG document, which can contain HTML via the SVG <foreignObject> element.
Browser support:
- SVG documents in
drawImage()are not currently supported in Firefox. The related bug is here and I think a fix is planned. <foreignObject>is buggy in most browsers - Firefox (ironically) seems to have the best support.
Example:
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject x="0" y="0" height="800" width="800">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Hello world!</p>
<input type="date"/>
</body>
</foreignObject>
</svg>Try loading that file with canvas drawImage() in Opera - as you'll see its interactivity is fairly buggy, but it displays fine.
这篇关于如何将HTML文件加载到画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
