任何人都可以告诉我如何将我的 html 内容放在画布上。如果我们能做到这一点，这些元素的属性和事件是否有效，并且我还在该画布上绘制了动画。
From MDN 上的这篇文章:
您不能只将 HTML 绘制到画布中。相反，您需要使用 包含要渲染的内容的 SVG 图像。绘制 HTML 内容，您将使用包含 HTML 的元素，然后 将该 SVG 图像绘制到画布中。
建议您按照以下步骤操作：
这里唯一真正棘手的事情——这可能是 夸大其辞——正在为您的图像创建 SVG。所有你需要做的 创建一个包含 SVG XML 的字符串并构造一个 Blob 与以下部分。
- Blob 的 MIME 媒体类型应为“image/svg+xml”。
- 元素。
- 在里面，元素。
- （格式良好的）HTML 本身嵌套在 .
通过使用如上所述的对象 URL，我们可以内联 HTML 而不必从外部源加载它。你可以，的 当然，如果您愿意，可以使用外部源，只要来源是 与原始文档相同。
提供了以下示例（您可以在罗伯特·奥卡拉汉的博客):
DEMO
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 呈现到画布，如下所示：
这些元素的属性和事件是否有效？
不，绘制到画布上的所有内容都会被遗忘为被动像素 - 它们只是变成图像。
您将需要提供自己提供的自定义逻辑，以便处理诸如点击、对象、事件等之类的事情。该逻辑需要定义区域、对象和其他任何内容。