任意の要素をキャンバスとして使用する方法はありますか？

Question

例私は、<canvas>を使用すると、常にHTMLに実際のキャンバス要素があることがわかります。例えば、私が描画したいと思っている要素<header>を既に持っているとします。キャンバスとして直接使用する方法はありますか？または、キャンバス要素を追加してヘッダーを塗りつぶす必要がありますか？

Answer 1

私は最初は懐疑的でしたが、ほぼを達成するための方法が1つあります。ウェブキットではcssとgetCSSCanvasContext()を使用しています。これにより、キャンバスを背景として表示できるので、キャンバスのようにコントロールすることができます。

例：

HTML

<header></header> 

CSS

header { background: -webkit-canvas(fooBar); } 

はJavaScript（文書準備/オンロード）

function fillCanvas(w, h) { 
    var ctx = document.getCSSCanvasContext('2d', 'fooBar', w, h); 

    // draw into canvas 
} 

完全な例と詳細はhereです。

希望すると便利です。