如何在canvas元素中使用html内容

Question

任何人都可以告诉我如何将我的html内容放在画布上。如果我们可以这样做，那些元素的属性和事件是否有效，并且我也在该画布上绘制了动画。

Answer 1

来自this article on MDN：

  

您不能只将HTML绘制到画布中。相反，你需要使用   包含要呈现的内容的SVG图像。绘制HTML   在内容中，您将使用包含HTML的元素   将SVG图像绘制到画布中。

建议您按照以下步骤操作：

  

这里唯一真正棘手的事情 - 这可能是一个   夸大 - 为你的形象创造SVG。所有你需要做的   创建一个包含SVG XML的字符串并构造一个Blob   以下部分。

     

  
1. blob的MIME媒体类型应为“image / svg + xml”。
  
2. 元素。
  
3. 在里面，元素。
  
4. （格式良好的）HTML本身，嵌套在。
中         

通过使用上述对象URL，我们可以内联我们的HTML   而不必从外部源加载它。你可以   当然，如果您愿意，可以使用外部源，只要原点是   与原始文件相同。

提供了以下示例（您可以在this blog by Robert O'Callahan中看到有关此内容的更多信息）：

<强>样本

const ctx = document.getElementById("canvas").getContext("2d");
const data = `
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
  <foreignObject width='100%' height='100%'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>
      <em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>CANVAS</span>
    </div>
  </foreignObject>
</svg>
`;
const img = new Image();
const svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
const url = URL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  URL.revokeObjectURL(url);
};
img.src = url;

<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>

此示例导致此HTML呈现为画布，如下所示：

  

这些元素的属性和事件是否有效？

不，画布上的所有内容都被遗忘为被动像素 - 它们只是一个图像。

您需要提供自己提供的自定义逻辑，以便处理点击，对象，事件等任何事情。逻辑需要定义区域，对象和其他任何东西。

Answer 2

const ctx = document.getElementById("canvas").getContext("2d");
const data = `
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>
  <foreignObject width='100%' height='100%'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>
      <em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>CANVAS</span>
    </div>
  </foreignObject>
</svg>
`;
const img = new Image();
const svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
const url = URL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  URL.revokeObjectURL(url);
};
img.src = url;

<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>