如何在画布上绘制 HTML 元素？

Question

我想创建一个像素艺术应用程序，到目前为止一切顺利。您可以在像素网格上绘图。我想要弄清楚的是，如何将艺术渲染到 html 画布上。我知道有 drawImage()，但我想渲染 HTML5 元素，而不是图像。有什么建议吗？

Answer 1

API 中仍然没有任何正式内容可以执行此操作。这已经讨论过几次了，但这会带来很多安全问题需要解决……是的，不要屏息以待。虽然这个新提案可能是一个，如果你想跟踪它的演变。

目前，渲染 HTML 元素的唯一方法是生成 DOM 的副本，将其插入 SVG

<foreigObject>

，生成此 SVG 图像的独立文件，并通过

drawImage()

将其绘制在画布上。虽然这不会准确地呈现您在 HTML 中看到的内容（因为我谈到的安全问题），而且它很慢而且很复杂。

因此，我邀请您直接搜索 2D 上下文 API，并直接享受自己绘制网格的乐趣。最终所需要的只是一些

ctx.fillStyle = color

、

ctx.fillRect(x, y, size, size)

和一个

for

循环。但我确信您可以在网上找到指导您完成此操作的教程。
（当你准备好并且想要使其性能超强时，你甚至可以考虑在像素级别的 ImageData 上绘制网格，并在画布上缩放结果，为此，StackOverflow 上有一些答案可以向你展示如何做到这一点，但从基础开始）。