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帆布做的。