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

Question

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

Answer 1

API 中仍然没有任何正式的东西可以做到这一点。已经讨论过几次了，但这会带来很多安全问题需要解决......是的，不要屏住呼吸看到这一切的到来。

目前，渲染 HTML 元素的唯一方法是生成 DOM 的副本，将其插入到 SVG <foreigObject>，生成此 SVG 图像的独立文件并通过 @ 将其绘制在画布上987654322@。虽然这不会完全呈现您在 HTML 中看到的内容（因为我谈到的安全问题），而且它很慢而且很复杂。

因此，我邀请您直接搜索有关 2D 上下文 API 的信息，并立即享受为自己绘制网格的乐趣。最终只需要几个ctx.fillStyle = color、ctx.fillRect(x, y, size, size) 和一个for 循环。但我相信您将能够在网上找到指导您完成此操作的教程。
（当你准备好并且如果你想让它变得超级高性能，那么你甚至可以考虑在 ImageData 上以像素级别绘制网格并在画布上缩放结果，为此 StackOverflow 上有一些答案会告诉你如何做到这一点，但从基础开始）。