キャンバスを使用して個別に画像をスキューさせる

Question

私はHTML5キャンバスを使用して一連のツリーとそれに対応するシャドウを作成しています。私はそれぞれの影が光源の位置に基づいていることを望んでいます。私はそれぞれの木を描くことができ、それは影であり、一度にすべての影を歪ませますが、各影を個別に歪ませようとすると、私は逃げることができます。私のコードは次のとおりです。

var ctx = cvs[0].getContext('2d'); 
ctx.save(); 
//skew the canvas 
ctx.transform(1,0,0.3,-1,0,0); 

ctx.drawImage(tree1,74,-117,20,40); 
ctx.drawImage(tree1,126,-125,20,40); 

var imgd = ctx.getImageData(0, 0, 500, 300); 
var pix = imgd.data; 
//convert the drawn trees to shadows 
for (var i = 0, n = pix.length; i < n; i += 4) { 
    pix[i ] = 0; // red 
    pix[i+1] = 0; // green 
    pix[i+2] = 0; // blue 
    // alpha 
} 
ctx.putImageData(imgd, 0, 0); 

//remove the skewing 
ctx.restore(); 

//draw full color trees 
ctx.drawImage(tree1,50,40,20,40); 
ctx.drawImage(tree1,100,50,20,40); 

drawImageを使用して画像を描くときに、画像を歪める方法はありますか？前もって感謝します！

Answer 1

ここで理解しなければならないことが2つあります。

変換をコンテキストに適用するときは、既に描画されたものには適用されません。 約を描画するものにのみ変換を適用します。

つまり、です。 drawImageを使用して画像を描くと画像が歪む場合があります。それがその唯一の方法です。

imageDataを使用しているので注意してください。キャンバスにimageDataを配置すると、ピクセルが完全であり、変換マトリックスは無視されます。

だからあなたは、各シャドウの異なるスキューをしたい場合、あなたがしなければならないすべては、その後回復し、変換コンテキストを他の方法でとの事B.

を描き、事のAを描き、コンテキストを変換であるここに例を示しますあなたのコード使用：サイドノートでは

http://jsfiddle.net/QfrVB/

---

を、あなたは本当にすべてでここに画像データを使用する必要はありません。それを使用するのは本当に遅い操作です（ゲームのようなアニメーションアプリを作っている場合は重要です）できればそれを避けるべきです。代わりにこれを行うの

は：

var imgd = ctx.getImageData(0, 0, 500, 300); 
var pix = imgd.data; 
//convert the drawn trees to shadows 
for (var i = 0, n = pix.length; i < n; i += 4) { 
    pix[i ] = 0; // red 
    pix[i+1] = 0; // green 
    pix[i+2] = 0; // blue 
    // alpha 
} 
ctx.putImageData(imgd, 0, 0); 

あなたはこれを行うことができます。そのコードが何

ctx.globalCompositeOperation = 'source-atop'; 
ctx.fillStyle = 'black'; 
ctx.fillRect(0,0,500,300); 
ctx.globalCompositeOperation = 'source-over'; // back to normal 

は現在、キャンバス上に存在するすべての画素の上に黒の描画です。すべての影を最初に描画するので、fillRectを1回呼び出すだけで、すべての影を黒くすることができます。ここに住んで

参照： http://jsfiddle.net/QfrVB/2/