Javascript画布垂直倾斜图像

是否可以在画布上扭曲图像，使其显示为另一图像的反射

下面是一个例子：

我需要翻转和倾斜图像以获得所需的效果，但我无法使其看起来像那样。如何做到这一点

我发现了这个例子：

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

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

您可以使用

context.scale

垂直翻转图像：

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

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

将0,0原点移动（Move==translate）到所需的x，y:

ctx.translate（x，y）

绘制原始图像：

ctx.drawImage（img，0,0）

移动到原始图像的底部：

ctx.translate（0，img.height）

缩放以垂直翻转图像：

ctx.Scale（1，-1）

应用倾斜：

ctx.transform（1,0，倾斜角度，1,0,0）

缩小反射图像（仅为了美观）：

ctx.scale（1,0.50）

使反射图像不透明度为50%：

ctx.globalAlpha=0.50

绘制反射图像：

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=画布宽度；
var ch=画布高度；
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/character1.png";
函数start（）{
//60x110
斜反射（img，25,25）
}
函数斜反射（img，x，y）{
//计算ctx.transform所需的45度倾斜角度
var skewAngle=-Math.tan（Math.PI/4）；
//将0,0原点移动到x，y
ctx.translate（x，y）；
//绘制原始图像
ctx.drawImage（img，0,0）；
//移动到原始图像的底部
ctx.平移（0，img.高度）；
//使用“缩放”翻转图像
比例尺（1，-1）；
//歪斜
变换（1,0，斜交角，1,0,0）；
//缩小反射图像
比例尺（1,0.50）；
//使反射图像不透明度为50%
ctx.globalAlpha=0.50；
//绘制反射图像
ctx.图纸图像（img，0，-img.高度）；
//通过将所有变换设置为默认值进行清理
setTransform（1,0,0,1,0,0）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}

---

没有时间发布答案，但仔细看看你是冠军！谢谢你的详细回复。

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