html5怎么显示多边形,javascript – HTML5画布,图像上/中的多边形可能吗？

经过一些研究,我相信可以通过首先使用您的图像创建一个模式,然后将该模式设置为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似乎没有为此提供方法(通常仅支持仿射变换：平移,旋转,缩放,剪切或上述的组合).

在2D变换上引用this post：

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是另一个故事)将支持它.简而言之,我不可能通过我所知道的任何方式做你想做的事.