如何通过给定坐标绘制具有倾斜角和旋转角的矩形？

Question

结果与框架不完全匹配...... 如何通过给定的 4 个坐标在画布舞台上绘制矩形？

给定的坐标有一点倾斜角，我用倾斜角绘制失败，不知道如何用4个坐标计算倾斜角 这是我到目前为止所能得到的，我可以用旋转角度来绘制它。我还错过了什么？您可以复制html代码并查看结果..

This 告诉如何用三角形计算斜角，但如何在矩形中使用它..

我是高中生，数学不太好，请见谅..:(

谢谢..

var _width, _height;
var img = new Image();
var img2 = new Image(),
  img2Widht = 0,
  img2Height = 0;
img.src = "http://production.manboker.com/share/1.jpg";
var canvas = document.getElementById("canvas");
img.onload = function() {
  canvas.width = _width = this.width;
  canvas.height = _height = this.height;
  img2.src = "http://production.manboker.com/share/2.png";
  img2.onload = function() {
    step1();
  }
}

var coor = {
  leftTop: ["92", "569"],
  rightTop: ["672", "569"],
  leftBottom: ["109", "1437"],
  rightBottom: ["723", "1437"]
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

function step1() {
  ctx.clearRect(0, 0, _width, _height);
  ctx.globalCompositeOperation = 'source-over';
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = "multiply";
  ctx.save();
  ctx.translate(coor['leftTop'][0], coor['leftTop'][1]);
  ctx.rotate(radian(coor['leftTop'], coor['leftBottom']));
  img2Widht = distance(coor['leftTop'], coor['rightTop']);
  img2Height = distance(coor['leftTop'], coor['leftBottom']);
  ctx.drawImage(img2, 0, 0, img2Widht, img2Height);
  ctx.restore();
}

function distance(a, b) {
  var x = b[0] - a[0],
    y = b[1] - a[1];
  return Math.sqrt(x * x + y * y);
}

function radian(a, b) {
  return Math.atan2(a[0] - b[0], b[1] - a[1]);
}

* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

<canvas id="canvas" style="position:absolute;"></canvas>

Answer 1

要将平面图像正确地放入 3d 帧的照片中，通常不仅需要旋转和倾斜（或更一般的仿射变换），还需要投影变换。这种变换是由四个点的图像唯一定义的，只要其中没有三个点位于一条公共线上。 Finding the Transform matrix from 4 projected points (with Javascript) 在 Math SE 上，Redraw image from 3d perspective to 2d 在 SO 上是我描述如何做到这一点的答案。