能否在Canvas自定义多边形区域内填充图片？

当然可行！你可以通过Canvas的两种核心功能来实现这个需求，下面给你详细的步骤和代码示例：

方法一：使用裁剪（Clip）功能 #

这种方法的思路是先定义好你的多边形路径，然后把这个路径设置为画布的裁剪区域，之后在这个区域内绘制的图片只会显示多边形内部的部分，非常适合需要完整展示图片局部内容的场景。

实现代码 #

// 先加载图片，必须等图片加载完成再进行绘制
const img = new Image();
img.src = '你的图片路径'; // 替换成实际的图片地址
img.onload = function() {
  // 获取Canvas上下文
  const ctx = document.getElementById('yourCanvasId').getContext('2d');
  
  // 绘制你的自定义多边形路径
  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.closePath();

  // 保存当前画布状态（推荐，避免裁剪影响后续绘制）
  ctx.save();
  // 将多边形设置为裁剪区域
  ctx.clip();

  // 在裁剪区域内绘制图片，可根据需求调整位置和大小
  // 示例：铺满整个裁剪区域（你可能需要根据多边形边界调整参数）
  ctx.drawImage(img, 0, 0);

  // 恢复画布状态，取消裁剪
  ctx.restore();

  // 最后绘制多边形边框（可选）
  ctx.lineWidth = 5;
  ctx.strokeStyle = 'black';
  ctx.stroke();
};

方法二：使用图案填充（createPattern） #

这种方法是把图片创建成一个可重复的图案，然后用这个图案作为多边形的填充样式，适合需要平铺图片填充多边形的场景，比如纹理背景效果。

实现代码 #

const img = new Image();
img.src = '你的图片路径';
img.onload = function() {
  const ctx = document.getElementById('yourCanvasId').getContext('2d');
  
  // 创建图案填充，第二个参数控制重复方式：repeat/repeat-x/repeat-y/no-repeat
  const fillPattern = ctx.createPattern(img, 'repeat');

  // 绘制多边形路径
  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.closePath();

  // 设置填充样式为创建的图案
  ctx.fillStyle = fillPattern;
  // 填充多边形
  ctx.fill();

  // 绘制边框
  ctx.lineWidth = 5;
  ctx.strokeStyle = 'black';
  ctx.stroke();
};

关键注意事项 #

• 图片加载时机：一定要在img.onload回调里执行绘制逻辑，否则图片还没加载完成，drawImage或createPattern会失效。
• 适配多边形大小：如果需要图片刚好适配多边形的尺寸，可以先计算多边形的边界框（最小/最大x、y值），然后调整drawImage的参数来缩放图片；对于图案填充，可以使用patternTransform来调整图案的缩放比例（这是ES6+的API，兼容性需注意）。
• 画布状态管理：使用clip()时，记得用save()和restore()来管理画布状态，避免后续绘制被意外裁剪。

内容的提问来源于stack exchange，提问作者Sujeesh S