使用点的HTML5画布drawImage？

Question

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

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

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

Answer 1

Quad Warping是您所需要的，没有复杂的3D

您要求将矩形图像渲染为可能的非矩形四边形。

这样做的正确方法是计算变换矩阵，无需渲染真正的3D内容。这是在计算Homography矩阵时完成的。为此，您需要了解转换矩阵并实现一些代码来解决某些方程式。

这个过程很好理解，并且需要原始的四个坐标和目标四个点，并且您拥有它们，因此您只需要一个过程来计算变换矩阵。该矩阵基本上通过Gauss-Jordan消除来计算。

关于矩阵求解器和一般程序的

Check this。一旦你理解了转换，它就变得微不足道了。 check this to understand what a homography is也是here it's explained how it's calculated。还有Here's an awesome demo，包含javascript和CSS的示例。

演示

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_6有来源和解释。

Answer 2

您正在寻找的东西叫做用3D渲染语言绘制四边形。

您通常将形状分割为2个三角形（面），然后使用纹理填充单独绘制它们。

这是针对该问题的（复杂）解决方案：https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838使用2D <canvas>作为渲染引擎的Three.js 3D引擎。

由于事情不是那么简单，我建议你使用Three.js或类似的包装器，它提供高级抽象而不是纹理面部操作。查看其他Three.js 2D <canvas>示例，您就可以了解其工作原理：

http://mrdoob.github.com/three.js/