问题描述
我使用HTML5画布创建一系列树及其相应的阴影。我想要每个阴影是基于光源的位置。我可以绘制每棵树和它的阴影，以及倾斜所有的阴影，一次，但试图歪斜每个阴影单独逃避我。这是我的代码：
var ctx = cvs [0] .getContext（'2d'）;
ctx.save（）;
//拖动画布
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;
//将绘制的树转换为阴影
for（var i = 0，n = pix.length; i pix [i] = 0 ; // red
pix [i + 1] = 0; // green
pix [i + 2] = 0; // blue
// alpha
}
ctx.putImageData（imgd，0，0）;
//删除偏移
ctx.restore（）;
//绘制全彩树
ctx.drawImage（tree1,50,40,20,40）;
ctx.drawImage（tree1,100,50,20,40）;
当我使用drawImage绘制图片时，有没有办法扭曲图片？提前感谢！
这里需要了解两件事。
将变换应用到上下文时，不会将其应用于已绘制的任何内容。
换句话说，它总是 在你使用drawImage绘制图像时偏移图像的情况！这是它做的唯一方法。
这个规则有一个例外，你应该记住，因为你使用imageData：把imageData到画布是像素完美的，忽略任何转换矩阵。
因此，如果你想为每个阴影有不同的偏斜，你所要做的就是转换上下文，绘制事物A，然后恢复和转换上下文
在旁注中，你真的不必在这里使用imageData。使用它是一个非常缓慢的操作（重要的是，如果你做一个动画应用程序像一个游戏），你应该避免它，如果你可以。
而不是这样做：
var imgd = ctx.getImageData（0，0，500，300）
var pix = imgd.data;
//将绘制的树转换为阴影
for（var i = 0，n = pix.length; i 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
这些代码所做的是在画布上当前存在的所有像素。
看到那里的生活：
I'm using an HTML5 canvas to create a series of trees and their corresponding shadows. I want each shadow to be based on the position of a light source. I can draw each tree and it's shadow as well as skew all the shadows at once, but trying to skew each shadow individually eludes me. Here's my code:
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);
Is there a way to skew the images as I draw them using drawImage? Thanks in advance!
There are two things you have to understand here.
When you apply a transformation to the context you do not apply it to anything already drawn. You only apply the transformation to things that are about to be drawn.
In other words, it is always the case that you skew images as you draw them using drawImage! That's the only way its done.
There's an exception to this rule that you should keep in mind since you're using imageData: Putting imageData onto the canvas is pixel perfect and ignores any transformation matrix.
So if you want a different skew for each shadow all you have to do is transform the context, draw thing A, then restore and transform the context in some other way and draw thing B.
Here's an example using your code:
On a side note, you really don't have to use imageData here at all. Using it is a really slow operation (important if you're making an animated app like a game) and you should avoid it if you can.
Instead of doing this:
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);
You can just do this:
ctx.globalCompositeOperation = 'source-atop';
ctx.fillStyle = 'black';
ctx.fillRect(0,0,500,300);
ctx.globalCompositeOperation = 'source-over'; // back to normal
What that code does is draw black over all pixels that currently exist on the canvas. Since you draw all shadows first you can black all of them out with one call to fillRect this way.
See that live here:http://jsfiddle.net/QfrVB/2/
这篇关于使用画布单独倾斜图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！