JavaScript扭曲图像[画布]

我有这样的图像：

并想这样画：

---

我可以用javascript来做吗？

给你。三种方法，css、canvas和svg。底部还有一个工作示例

CSS

#outer {
  perspective: 200px;
  -webkit-perspective: 200px;
}
#inner {
  position: absolute;
  left: 30px;
  width: 70%;
  height: 80%;
  background-color: #fff;
  transform: rotate(7deg) rotateX(40deg);
  -webkit-transform: rotate(7deg) rotateX(40deg);
}

画布

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

canvas.width = 200;
canvas.height = 150;

ctx.beginPath();
ctx.moveTo(50, 18);
ctx.lineTo(160, 30);
ctx.lineTo(180, 120);
ctx.lineTo(10, 100);
ctx.fillStyle = "#fff";
ctx.fill();

SVG

<svg>
  <path d="M50 18 L160 30 180 120 10 100 z" fill="#fff" />
</svg>

下面是一个关于的所有3个的工作示例

---

希望能有帮助。干杯

当然，你应该能够在JavaScript中完成这项工作。发布你的代码和你尝试过的具体细节，以及哪些不起作用。@Tristan我没有任何代码。这就是我问的原因。我只想画第一张像第二张一样的图片。我不知道如何开始。画布只做仿射变换（本机），只会产生平行四边形——像你们这样的梯形（本机）是不可能的。下面是一个创建非平行四边形图像的示例，方法是将图像切片并调整大小和位置：感谢您的回答，但有人编辑了我的问题并交换了标题。它的顺序正好相反。