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

Question

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

Answer 1

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

Answer 2

さて、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; 

Answer 3

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

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

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