html5-canvas - 如何在画布元素中使用 html 内容

Question

谁能告诉我如何将我的 html 内容放在画布上。如果我们能做到，这些元素的属性和事件是否有效，而且我在画布上绘制了动画。

Answer 1

来自MDN 上的这篇文章：

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

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

这里唯一真正棘手的事情（这可能是夸大其词）是为您的图像创建 SVG。您需要做的就是创建一个包含 SVG 的 XML 的字符串，并使用以下部分构造一个 Blob。

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

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

提供了以下示例（您可以在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>