如何在Canvas JS中填充由独立线条构成的闭合区域？

问题原因 #

填充失效的核心原因是绘制路径时错误多次调用moveTo()方法：

• moveTo()作用是抬笔移动到指定坐标，不会生成两点间的连接路径
• 你在每段lineTo()结束后都额外调用moveTo()移动到下一个起点，最终生成的是3条独立的不相连线段，没有形成连续闭合路径，fill()无法识别可填充的区域。

修复方案 #

仅保留第一次moveTo()定义路径起点即可，后续线段直接调用lineTo()，lineTo()默认从上一个路径终点开始绘制，不需要额外抬笔移动。
也可以在路径绘制完成后主动调用context.closePath()闭合路径，避免手动连接起点出现误差。

修复后完整代码 #

<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="978" height="900"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      // 仅首次需要moveTo定义起点
      context.moveTo(10, 10);
      context.lineTo(190, 190);
      // 去掉多余的moveTo，直接从上个终点绘制下一段
      context.lineTo(200, 280);
      // 直接连回起点，或者调用context.closePath()自动闭合
      context.lineTo(10, 10);
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.stroke();
    </script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Gregory Kafanov