Javascript画布垂直偏斜图像

Question

是否可以在画布上倾斜图像以使其显示为另一个图像的反射？

以下是插图：

我需要翻转和倾斜图像以获得所需的效果，但我无法让它看起来像那样。如何实现这一目标？

我找到了这个例子：

http://jsfiddle.net/jpnrzc9y/

ctx.save();
ctx.transform(1,0,0.3,-1,0,0);
ctx.drawImage(tree1,74,-117,20,40);
ctx.restore();

他们似乎根据一些随机值设置变换。

但我无法理解它。这些值对我来说似乎很随机。我试图创建一个动态函数，允许我确定偏斜量，并适用于所有图像。

Answer 1

您可以使用2垂直翻转图片：

context.scale

以下是创建图像倾斜反射的步骤：

1. 将0,0原点移动（移动==平移）到所需的x，y：// flip the canvas vertically context.scale(1,-1);

2. 绘制原始图像图像：ctx.translate(x,y);

3. 移至原始图片的底部：ctx.drawImage(img,0,0);

4. 缩放以垂直翻转图像：ctx.translate(0,img.height);

5. 应用偏斜：ctx.scale(1,-1);

6. 缩小反射的图像（仅用于美学）：ctx.transform(1,0,skewAngle,1,0,0);

7. 使反射的图像具有50％的不透明度：ctx.scale(1,0.50);

8. 绘制反射图像：ctx.globalAlpha=0.50;

9. 通过将所有转换设置为默认值进行清理：ctx.drawImage(img,0,-img.height);

以下是示例代码和演示：

ctx.setTransform(1,0,0,1,0,0);

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/character1.png";
function start(){
  // 60x110
  skewedReflection(img,25,25)
}

function skewedReflection(img,x,y){
  // calc the 45 degree skew angle needed by ctx.transform
  var skewAngle=-Math.tan(Math.PI/4);
  // move the 0,0 origin to x,y
  ctx.translate(x,y);
  // draw the original image image 
  ctx.drawImage(img,0,0);
  // move to the bottom of the original image
  ctx.translate(0,img.height);
  // use scale to flip the image
  ctx.scale(1,-1);
  // apply a skew
  ctx.transform(1,0,skewAngle,1,0,0);
  // shrink the reflected image
  ctx.scale(1,0.50);
  // make the reflected image 50% opacity
  ctx.globalAlpha=0.50;
  // draw the reflected image
  ctx.drawImage(img,0,-img.height);
  // clean up by setting all transforms to default
  ctx.setTransform(1,0,0,1,0,0);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }