Javascript 如何通过坐标计算HTML画布中的变换

我有一个HTML的画布，上面有我加载的图像。图像具有大小（宽度、高度）。我得到两个坐标-（x1，y1）和（x2，y2）-它们是目标变换的左上角和右上角

我需要做的是拍摄原始图像，将其左上角放入（x1，y1）并进行变换，使右上角位于（x2，y2）-我想这需要一个倾斜变换

问题是如何计算右偏斜以将右上角精确放置在（x2，y2）中。 将左上角放在（x1，y1）中需要一个简单的平移变换-没有问题

非常感谢,

请参阅附图：

---

您可以使用MSpaint获取（X，Y）的坐标，也可以使用此网站以方便参考

---

必须使用setTransform才能扭曲图像

ctx.setTransform ( scaleX, skewX, skewY, scaleY, transX, transY ) ;

您希望更改skewX，以便当x=宽度时，y由targetSkew更改，因此：

skewX =  targetSkew / width 

---

在您的情况下，调用fillRectSkewed（x1，y2，imageWidth，imageHeight，y1-y2）

谢谢，但是我得到了（X，Y）坐标-我想知道如何从坐标中得到变换的倾斜。为什么不使用CSS3呢？它很容易实现！没关系，反正我需要计算倾斜。

function fillRectSkewed(x,y,w,h,sk) {
  ctx.save();
   var skewRatio=sk/w;
   ctx.setTransform(1,skewRatio,0,1, x,y);
   ctx.fillRect(0, 0, w,h);
  ctx.restore();
  }

fillRectSkewed(40,40, 80,40, 20);