CSS5背景としてのHTML5キャンバス？

getContext（ "2d"）で変更できるDIVのキャンバスの背景イメージを作成することはできますか？CSS5背景としてのHTML5キャンバス？

2012-04-02 GoldenNewby

-4

div内にcanvasを絶対cssの位置に置くことができます。他の要素はキャンバスよりも大きいzインデックスを持つ必要があります。

2012-04-02 05:34:54

さて、divの中にキャンバス要素を配置し、その高さと幅を最大化し、その位置をrelativeに、z-indexを負の値に設定することができます。

ただし、実際のCSS background-image:...を使用する場合は、キャンバス内に画像を作成する必要があります。あなたは、あなたがあなたの元background-imageの値として使用することができ、データのURLを取得するためにtoDataURLを使用することができます。

var canvas = document.getElementById('canvas'); 
var data = canvas.toDataURL(); 
var myElement = document.getElementById('myelement'); 

myElement.style.backgroundImage = 'url('+data+')';

あなたは新しい背景を作成するが、既存のものを操作し、あなたの元をロードしたくない場合Imageオブジェクトに背景（または参照を取得）し、使用drawImageは：

var image = new Image(); 
image.onload = function(){ 
    context.drawImage(this,0,0); 
    someCallbackToManipulateTheImage(); 
} 
var src = myElement.style.backgroundImage.substr(4); 
src.substr(0,src.length - 1); 
image.src = src;

出典

2012-04-02 05:35:40 Zeta

Hm、面白いです。誰かがこの回答を嫌っていました。 – Zeta

美しく行われた – TaterJuice

キャンバスを複数の背景として使用する方法はありますか？複数のキャンバスを挿入したり、複数のデータを生成したりすることなく、DIVのバックグラウンドイメージは--webkit-canvasと同じですか？可能な場合はメモリを節約します。cssファイルにキャンバスURLを指定できる場合は、同じバックグラウンドを持つすべてのDIVに対してキャンバスを挿入する必要がないため、プログラミングが大幅に簡素化されます。 – sean

これにdiv要素の背景画像を設定します。

"url('" + canvas.toDataURL() + "')";

編集：その時点で、キャンバスを呼び出した瞬間にキャンバスにあった画像データだけがバックグラウンドイメージに格納され続けるため、キャンバスで自由に操作できます。 toDataURL（）。その時点でdivの背景に影響を与えないので、自由にキャンバスを破棄または描画してください。

出典

2012-04-02 05:36:50 Josh1billion

これが期待どおりに動作すると仮定すると、これと選択された回答はどちらも100％正しいです。これは、CSSでの背景画像プロパティの割り当てです。もう1つは、z-indexingに基づいています。 –

これは、OPで探していたものが、動的に描画されたキャンバスの表現をここにURLでエンコードされた静的なイメージに置き換えるためのものであると考えています。 –

CSS5背景としてのHTML5キャンバス？

答えて

関連する問題