HTML5 canvas drawImage 使用点？

Question

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

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

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

Answer 1

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

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

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

这个过程很好理解，需要原始的四个坐标和目标的四个点你都有，所以只需要一个计算变换矩阵的过程。该矩阵基本上是通过Gauss-Jordan消元法计算得到的。

Check this关于矩阵求解器和一般程序。一旦你理解了转换，做起来就变得微不足道了。还有 check this to understand what a homography is .和 here it's explained how it's calculated ，带有 javascript 和 CSS 示例。

演示

Here's an awesome demo与来源和解释。