HTML5画布如何使用点绘制图像？

Question

我需要使用4个点来绘制一张图片。这4个点已经存储在一个数组中，这些位置是变化的。现在我需要绘制一张反映这些位置的图片。然而，context.drawImage只接受一个位置。

应该像这样，有4个位置：

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

- Forested

---

为了澄清我是否理解您的意思，这张图片有可能是歪斜的，而不是完美的正方形？ - Daedalus

不是完美的正方形，没关系。 - Forested

Answer 1

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

你想要将一个矩形图像呈现到可能不规则的四边形中。

正确的方法是计算变换矩阵，无需呈现真正的3D内容。这是通过计算单应性矩阵来完成的。为此，您需要了解转换矩阵并实现一些代码以解决一些方程。

这个过程已经被很好地理解，并且需要原始的四个坐标和目标的四个点，您已经拥有它们，所以您只需要一个计算变换矩阵的过程。这个矩阵基本上是通过高斯-约旦消元计算出来的。

请查看矩阵求解器和常规程序。一旦您了解了转换，就可以轻松完成它。还可以查看这个以了解什么是单应性。以及这里解释了如何计算，并提供了JavaScript和CSS的示例。

Demo

这里有一个很棒的演示，包括源代码和说明。

- Ariel M.

---

很棒的演示链接 +1 真是太棒了 :o - Fidel90

实际上，将四边形映射到矩形有两种方法（至少）。我知道的另一种方法是双线性插值。这是人们在尝试直观实现时缺乏足够数学逻辑时想出来的，但它会将对角线扭曲成曲线。 - hippietrail

Answer 2

你所需要的是在3D渲染语言中绘制四边形。通常情况下，你需要将形状分成两个三角形（面），并使用纹理填充单独绘制它们。这里有一个（复杂的）解决方案：https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L838 Three.js 3D引擎使用2D <canvas> 作为渲染引擎。由于问题不是那么简单，我建议你使用Three.js或类似的封装器，它提供了高级抽象，用于纹理化面操作。查看其他Three.js 2D <canvas> 示例，你就能明白它是如何工作的。

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

- Mikko Ohtamaa

---

固定链接（我检查了原始链接，指向发布时称为patternPath的函数）：https://github.com/mrdoob/three.js/blob/r91/examples/js/renderers/CanvasRenderer.js#L917 - Shaun Lebron