HTML5画布使用点绘制图像？

我需要画一个图像使用4点。我将这4个点存储在一个数组中，这些位置会发生变化。现在我需要画一幅反映这些位置的图像。context.drawImage仅接受1个位置

应该是这样的，4个位置：

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y

---

您正在寻找的是在3D渲染语言中绘制四边形

通常将形状拆分为两个三角形（面），并使用纹理填充分别绘制它们

这里有一个（复杂的）解决方案：Three.js 3D引擎使用2D

作为渲染引擎

由于问题并不是那么简单，我建议您使用Three.js或类似的包装器，它为纹理人脸操作提供高级抽象。查看其他Three.js 2D

示例，您就会了解它的工作原理：

四边形扭曲是您所需要的，无需复杂的3D 您要求将矩形图像渲染为可能的非矩形四边形

正确的方法是计算变换矩阵，无需渲染真实的3D内容。这是通过计算单应矩阵来完成的。为此，您需要理解转换矩阵，并实现一些用于求解某些方程的代码

这个过程是很好理解的，需要原始的四个坐标和目标的四个点，你有它们，所以你只需要一个过程来计算变换矩阵。该矩阵基本上由高斯-乔丹消去法计算

关于矩阵求解器的一般程序。一旦您理解了转换，那么它就变得微不足道了。也。还有javascript和CSS的示例

演示 有来源和解释。

---

为了澄清我对你的理解，图像有可能是歪斜的，不是完全方形的？不是完全方形的，对。很棒的演示链接+1很棒的东西：其他人实际上有两种方法（至少）将四边形映射到矩形。我知道的另一个是双线性插值。这就是那些没有足够数学逻辑的人在试图直观地实现它时有时会想到的，但它会将对角线扭曲成曲线。固定链接（我检查了原始链接在发布时指向名为patternPath的函数）：