如何在画布元素中使用 html 内容 [英] how to use html content inside a canvas element

问题描述

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

Can any one tell me how to place my html content on a canvas.And if we can do that, will the properties and events of those elements works or not, and also I have animations drawn on that canvas.

推荐答案

来自 MDN 上的这篇文章:

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

You can't just draw HTML into a canvas. Instead, you need to use an SVG image containing the content you want to render. To draw HTML content, you'd use a element containing the HTML, then draw that SVG image into your canvas.

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

It than suggest you follow these steps:

这里唯一真正棘手的事情 - 这可能是夸大其词——正在为您的图像创建 SVG.所有你需要做的是为 SVG 创建一个包含 XML 的字符串并构造一个 Blob与以下部分.

The only really tricky thing here—and that's probably an overstatement—is creating the SVG for your image. All you need to do is create a string containing the XML for the SVG and construct a Blob with the following parts.

1. blob 的 MIME 媒体类型应为image/svg+xml".
2. 元素.
3. 在其中，元素.
4. (格式良好的)HTML 本身，嵌套在 .

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

By using a object URL as described above, we can inline our HTML instead of having to load it from an external source. You can, of course, use an external source if you prefer, as long as the origin is the same as the originating document.

提供了以下示例(您可以在 罗伯特·奥卡拉汉的这篇博客):

The following example is provided (you can see more information about this in 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 被渲染到画布上:

This example results in this HTML being rendered to canvas as this:

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

Will the properties and events of those elements works or not ?

不，所有绘制到画布上的东西都被遗忘为被动像素——它们变成了简单的图像.

No, everything drawn to a canvas is forgotten as passive pixels - they becomes simply an image.

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

You will need to provide custom logic that you provide yourselves in order to to handle any such things as clicks, objects, events etc. The logic need to define the areas, objects and anything else.

这篇关于如何在画布元素中使用 html 内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！