html5 canvas可以给任何dom元素提供截图吗？

Question

我知道画布的drawimage方法可以绘制HTMLImageElement，HTMLCanvasElement，HTMLVideoElement

但如果我想画一个div容器的截图？

我知道html2canvas库，但我不太明白它的文档和API，我认为它不灵活。所以我想自己写一个吗？我该如何实现这一目标？

Answer 1

这不是很简单。您必须递归地遍历所有子节点，确定其计算的样式并手动绘制其表示。

例如，像

<div style="border: 1px solid red; background: blue;">foo</div> 

需要以下步骤：

• 确定div的尺寸和位置（getComputedStyle）
• 油漆蓝色填充矩形相应
• 涂料相应的红色矩形轮廓
• 确定计算的字体样式和填充
• 与位置和样式

添加“foo”的文本这基本上是html2canvas做什么，并没有原生API帆布做的。