经过一些研究，我相信可以这样做，首先使用您的图像创建一个模式，然后将该模式设置为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变换只能将块变换为平行四边形。例如，不可能将块变换为以下形状：[不规则形状]为了做到这一点，必须使用CSS3 3D Transforms。这就是为什么矩阵构建集只有三个控制点可以拖动，而不是四个。
CSS 3D Transforms有计划，但我不仅不知道它的支持范围有多广，我也不知道canvas元素（带有2d上下文，也就是WebGL）是否会支持它。简而言之，通过我所知道的任何手段都不可能做到你想做的事。

您可以使用context.clip()使用图像填充多边形：

//create an image
  var img = new Image();
  img.src = 'imgPath/image.png'

  //draw the image when loaded
  img.onload = function(){
      var ctx = canvas.getContext("2d");
      ctx.save();

      //define the polygon
      ctx.beginPath();
      ctx.moveTo(x1,y1);
      ctx.lineTo(x2,y2);
      ctx.lineTo(x3,y3);
      ctx.closePath();

      //draw the image
      ctx.clip();
      ctx.drawImage(img, leftMostXCoor, highestYCoor, polyWidth, polyHeight);

      //fill and stroke are still available for overlays and borders
      ctx.fill();
      ctx.stroke();

      ctx.restore();
  }

字符串

如果你只需要规则多边形，那么你可以使用这个CSS工具，而不是画布（免责声明，我写的）https://html-polygon.com
虽然它只为React和Vue构建，但您可以使用该网站上的播放工具并获取生成的HTML。