html5キャンバスはどのdom要素にもスクリーンショットを付けることができますか？

Question

私はキャンバスのdrawimageメソッドがHTMLImageElement、HTMLCanvasElement、HTMLVideoElementを描画できることを知っています

div divのスクリーンショットを描きたいのですか？

私はhtml2canvasライブラリを知っていますが、ドキュメントとAPIは分かりませんが、柔軟性がないと思います。私は自分で作成したいのですが、どうすれば実現できますか？

Answer 1

非常に単純ではありません。すべての子ノードを再帰的に反復し、計算されたスタイルを決定し、その表現を手動でペイントする必要があります。例えば

、

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

ようなものは、以下のステップが必要です

• はdivの寸法及び位置（getComputedStyle）
• 矩形応じ
• 塗料を充填されたブルー塗料決定しますそれに応じて赤い長方形の輪郭線
• は「foo」というその位置にテキストとスタイル

を追加計算されたフォントスタイルとパディング

を決定これはhtml2canvasが何をするか、基本的であり、それを行うにはネイティブのキャンバスのAPIはありません。