HTML5 Canvas绘制矩形路径无法填充问题求助

我太懂你这种困扰了——好不容易用路径画好单元格，结果填充效果死活不出来，踩过的坑我都有数，咱们从几个关键点排查解决：

• 先确保路径闭合且调用了填充方法
  要是你用rect()方法画矩形，它本身会生成闭合路径，但别忘了最后一定要调用ctx.fill()来触发填充。另外如果是手动用moveTo()和lineTo()画的矩形，必须用closePath()把路径闭合，不然填充会失效。举个例子：

  const ctx = document.getElementById('yourCanvas').getContext('2d');
  // 方法1：用rect()自动闭合
  ctx.beginPath();
  ctx.rect(20, 20, 80, 80);
  ctx.fillStyle = '#e63946'; // 先设填充色，再执行填充
  ctx.fill();
  
  // 方法2：手动绘制并闭合
  ctx.beginPath();
  ctx.moveTo(120, 20);
  ctx.lineTo(200, 20);
  ctx.lineTo(200, 100);
  ctx.lineTo(120, 100);
  ctx.closePath(); // 这步很关键，不闭合路径填充会出问题
  ctx.fillStyle = '#457b9d';
  ctx.fill();
  

• 每次画新路径前记得调用beginPath()
  Canvas的路径是累加的，要是你之前画过其他图形没重置路径，新的单元格路径会和旧路径混在一起，填充结果肯定不对。所以每次绘制新单元格之前，一定要用ctx.beginPath()开启一个全新的路径上下文。

• 检查填充样式是不是没设置对
  有时候不是填充没生效，而是填充色和背景色一样，或者你压根没设置fillStyle（默认是黑色，要是背景也是黑色就看不见）。可以先把填充色设成鲜艳的颜色比如'#f1faee'测试一下，确认填充是否正常。

• 避免Canvas上下文状态被污染
  如果之前用过clip()裁剪、globalAlpha设成透明，或者其他状态修改，都会影响填充效果。建议在绘制单元格前用ctx.save()保存当前状态，绘制完用ctx.restore()恢复，这样就不会被之前的操作干扰：

  ctx.save();
  // 绘制单元格的代码
  ctx.beginPath();
  ctx.rect(x, y, cellWidth, cellHeight);
  ctx.fillStyle = '#1d3557';
  ctx.fill();
  ctx.restore();
  

内容的提问来源于stack exchange，提问作者Dhanushu Uzumaki