JavaScript Canvas 垂直扭曲图像

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();

他们似乎根据一些随机值设置转换。但我无法理解它。这些值对我来说似乎非常随意。我正在尝试创建一个动态函数，允许我确定倾斜程度，并适用于所有图像。

- user3011902

---

没有时间回答，但可以查看https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform。 - Kaiido

Answer 1

您可以使用context.scale方法垂直翻转一张图片：

// flip the canvas vertically
context.scale(1,-1);

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

1. 将原点 (0,0) 移动到所需的 x,y 位置：ctx.translate(x,y);

2. 绘制原始图像：ctx.drawImage(img,0,0);

3. 移动到原始图像底部：ctx.translate(0,img.height);

4. 垂直翻转图像：ctx.scale(1,-1);

5. 应用倾斜：ctx.transform(1,0,skewAngle,1,0,0);

6. 缩小反射图像（仅为美观）：ctx.scale(1,0.50);

7. 使反射图像透明度降至 50%：ctx.globalAlpha=0.50;

8. 绘制反射图像：ctx.drawImage(img,0,-img.height);

9. 清除所有转换以返回默认状态：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; }

<canvas id="canvas" width=300 height=300></canvas>

- markE

---

你是个冠军！感谢你详细的回复。 - user3011902