javascript - 使用 Canvas 单独倾斜图像

Question

我正在使用 HTML5 Canvas 创建一系列树木及其相应的阴影。我希望每个阴影都基于光源的位置。我可以绘制每棵树及其阴影，也可以一次倾斜所有阴影，但尝试单独倾斜每个阴影却让我感到困惑。这是我的代码:

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，因此您应该记住此规则的一个异常(exception):将 imageData 放到 Canvas 上是像素完美的，并且忽略任何转换矩阵。

因此，如果您希望每个阴影有不同的倾斜，您​​所要做的就是变换上下文，绘制事物 A，然后以其他方式恢复和变换上下文并绘制事物 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

该代码的作用是在 Canvas 上当前存在的所有像素上绘制黑色。由于您首先绘制所有阴影，因此您可以通过这种方式调用一次 fillRect 将所有阴影涂黑。

在这里观看直播: http://jsfiddle.net/QfrVB/2/