使用畫布單獨晃動圖像

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

這裏有兩件事你必須明白。

當您對上下文應用轉換時，不會將其應用於任何已繪製的內容。您只將轉換應用於要繪製的約的東西。

換句話說，它是總是當您使用drawImage繪製圖像時您傾斜圖像！這是它完成的唯一方法。

這條規則有個例外，你應該記住，因爲你使用的是imageData：把imageData放到canvas上是完美的，並且忽略任何轉換矩陣。

所以，如果你想爲每個陰影所有你需要做的是改變的背景下，畫出事物的不同的傾斜，然後恢復以及其他一些方式轉變的背景下，借鑑的東西B.

下面是一個例子使用代碼：

http://jsfiddle.net/QfrVB/

---

在一個側面說明，你真的沒有用在這裏的imageData可言。使用它是一個非常緩慢的操作（如果你正在製作像遊戲一樣的動畫應用程序，這很重要），如果可以的話，應該避免它。

而不是做這個的：

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這種方式將所有陰影全部清除。

看到，住在這裏： http://jsfiddle.net/QfrVB/2/