如何在canvas元素中使用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本身，嵌套在。

1. The MIME media type of the blob should be "image/svg+xml".
2. The element.
3. Inside that, the element.
4. The (well-formed) HTML itself, nested inside the .

By使用如上所述的对象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.

提供以下示例（您可以在此博客作者：Robert O'Callahan ）：

The following example is provided (you can see more information about this in this blog by Robert O'Callahan):

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呈现为画布，如下所示：

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.

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