画布在html里面是什么代码,如何在画布元素中使用html内容

你不能只画成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 = `

I like CANVAS

`;

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;

在这个HTML这个例子的结果是呈现为这样的画布：

请问这些元素的属性和事件的作品还是不？

不，所有绘制到画布上的东西都被遗忘为被动像素 - 它们只是一个图像。

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