先我们不能直接把 HTML 画到 canvas 上。我们需要使用一个SVG 图像包含想要呈现的内容 。为了绘制 HTML 内容,你要先用<foreignObject> 元素包含 HTML 内容,然后再将这个 SVG 图像绘制到你的 canvas 中。
这里的foreignObject元素允许包含外来的XML命名空间,其图形内容是别的用户代理绘制的。这个被包含的外来图形内容服从SVG变形和合成。
我们转化的步骤为:
1. 创建一个blob 对象, 其 MIME 应为 “image/svg+xml”。
2. 一个 <svg> 元素。
3. 在 SVG 元素中包含的 <foreignObject> 元素。
4. 包裹到 <foreignObject> 中的(格式化好的) HTML。