如何将HTML文件加载到画布中?

Don*_*Don 3 html html5 canvas

我知道我们可以将图像加载到画布中,但我想知道我们是否能够将简单的HTML文件加载到画布中.如果有,怎么样?

谢谢.

luc*_*eer 5

简答:不,你不能.

答案很长: 不可靠,但是你可以用某些(可能是hackish)方式.关键在于您定义为"图像".您知道可以将图像添加到画布中drawImage()- 您可能不知道的是"图像"可能是什么(不一定是实际图像).

首先,"图像"可以是HTML5视频元素 - 因此您可以将视频添加到画布.其次,在大多数现代浏览器中,"图像"可以是SVG文档,其可以通过SVG <foreignObject>元素包含HTML .

浏览器支持:

  • drawImage()Firefox目前不支持SVG文档.在相关的bug是在这里,我想修复计划.
  • <foreignObject> 在大多数浏览器中都有错误 - Firefox(具有讽刺意味)似乎有最好的支持.

例:

<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>
Run Code Online (Sandbox Code Playgroud)

尝试drawImage()在Opera中使用画布加载该文件- 因为您会看到它的交互性相当错误,但它显示正常.