javascript - HTML5 Canvas ，多边形上/多边形中的图像可能吗？

Question

有没有办法使用 javascript html5 canvas 来创建一个多边形，然后在其中显示图像而不是颜色？

Answer 1

经过一些研究，我相信首先使用您的图像创建一个图案，然后将该图案设置为 fillStyle 可以做到这一点:

var ctx = canvas.getContext("2d");
var pattern = ctx.createPattern(imageObj, "repeat");
ctx.fillStyle = pattern;

然后只需创建多边形(使用 moveTo 和 lineTo)然后正常填充它即可。

来源:this plugin的源代码。免责声明:我自己还没有尝试确认是否有效。

更新:我仍在研究您是否可以操纵图像以适应任意多边形。原则上，您可以使用 setTransform这样做:

ctx.save();
ctx.setTransform(m11, m12, m21, m22, dx, dy);
ctx.drawImage(imageObj);
ctx.restore();

确定 setTransform 参数的值(如果可能的话)是棘手的部分。自从我做任何数学以来已经很久了，但如果我没记错的话，这里是需要做的事情:

(0,0) --- (w,0)       (x1,y1) --- (x2,y2)
  |         |            |           |
  |  Image  |     =>     |  Morphed  |
  |         |            |           |
(0,h) --- (w,h)       (x3,y3) --- (x4,y4)

对于每个点，您将执行以下矩阵运算:

|m11 m21 dx|   |xI|   |xM|
|m12 m22 dy| X |yI| = |yM|
| 0   0   1|   | 1|   | 1|

八个方程，六个变量(记住矩阵元素是变量，其余的是常量——我们的输入)。可能无解。现在只需推导(或谷歌搜索，或在 Math.SE 中询问...)并为每个参数实现公式...

更新 2: 虽然我没有确凿的证据证明这一点，但我相信用 setTransform 做你想做的事是不可能的。查看 Gimp 如何使用其“透视”工具，有必要更改转换矩阵的第三行以将图像转换为任意多边形。并且 Canvas API 似乎没有为此提供方法(通常只支持仿射变换:平移、旋转、缩放、剪切或以上的组合)。

引用 this post在 2D 变换上:

CSS3 2D-Transforms can only transform blocks into parallelograms. For example, it is impossible to transform a block into this shape: [Irregular Shape] In order to do this, one must use CSS3 3D Transforms. This is why the Matrix Construction Set only has three control points to drag around, not four.

有计划 CSS 3D Transforms ，但不仅我不知道它得到了多广泛的支持，我也不知道 Canvas 元素(具有 2d 上下文，即 - WebGL 是另一回事)是否会支持它。简而言之，通过我所知道的任何方式都不可能做你想做的事。