是否可以在画布内的选定区域内填充图像？答案

【问题标题】：Is it possible to fill an image within selected area inside canvas?是否可以在画布内的选定区域内填充图像？
【发布时间】：2018-05-31 12:42:34
【问题描述】：

我有多个多边形形状，要求是在这个绘制的多边形内填充图像。我对此进行了很多搜索，但示例中只显示了矩形、曲线、圆形。但在我的情况下，所有图像都有自定义多边形形状。下面给出一个例子：`

     ctx.beginPath();
      ctx.lineTo(8, 109);
      ctx.lineTo(5, 109);
      ctx.lineTo(14, 112);
      ctx.lineTo(31, 119);
      ctx.lineTo(42, 129);
      ctx.lineTo(89, 150);
      ctx.lineTo(131, 140);
      ctx.lineTo(222, 199);
      ctx.lineTo(225, 238);
      ctx.lineTo(268, 270);
      ctx.lineTo(283, 253);
      ctx.lineTo(320, 275);
      ctx.lineTo(322, 298);
      ctx.lineTo(342, 332);
      ctx.lineTo(343, 354);
      ctx.lineTo(320, 392);
      ctx.lineTo(0, 393);
      ctx.lineTo(8, 109);
      ctx.stroke();
      ctx.closePath();
      ctx.lineWidth = 5;
      ctx.fillStyle = 'blue';
      // ctx.fill();
// ctx.drawImage(img);
// ctx.drawImage(img, 170,80,80,320,320,170);

用颜色填充完美，但我需要用图像填充它。有可能吗？

【问题讨论】：

我得到了答案：它可以使用 - createPattern() 来实现
如果您能添加完整的答案并接受它会很棒，这样当其他人搜索此内容时，他们可以在这里找到它。

标签： html canvas html5-canvas

【解决方案1】：

ctx.createPattern();将图像设置在封闭路径内

【讨论】：