HTML5 Canvas鼠标拖拽绘制三角形无法填充的问题求解

核心原因 #

你绘制三角形的路径逻辑错误：多次调用context.moveTo()会将原本连续的三角形路径拆分为3条独立的线段，没有形成闭合的连通区域，因此context.fill()无法识别到可填充的范围。

修复后的drawTriangle函数代码 #

function drawTriangle(e) {
   e.preventDefault();
   e.stopPropagation();
   if (!isDrawing) return;
   const mx = e.offsetX;
   const my = e.offsetY;
   // 清空画布
   context.clearRect(0, 0, canvas.width, canvas.height);
   const twidth = Math.abs(mx - startPoint.x) ;
   context.beginPath();
   context.lineWidth = 3;
   context.lineJoin = context.lineCap = 'round';
   context.setLineDash([0, 0]);
   context.globalAlpha = 1.0;
   // 连续绘制三角形路径，不要插入多余moveTo
   if ( mx >= startPoint.x ) {
      const thirdPointX = mx - (2 * twidth);
      context.moveTo(startPoint.x, startPoint.y);
      context.lineTo(mx, my);
      context.lineTo(thirdPointX, my);
   } else {
      const thirdPointX = mx + (2 * twidth);
      context.moveTo(startPoint.x, startPoint.y);
      context.lineTo(mx, my);
      context.lineTo(thirdPointX, my);
   }
   // 闭合路径回到起点，形成完整三角形
   context.closePath();
   context.strokeStyle = 'red';
   context.fillStyle = 'rgba(25,50,75,0.5)';
   context.fill();
   context.stroke();
}

修复说明 #

• 移除了路径绘制过程中多余的moveTo调用，三个顶点通过lineTo连续连接，形成单条连通路径
• closePath()会自动将最后一个顶点和路径起点连接，形成完整的闭合三角形区域，可被正常填充
• 填充操作放在描边之前，避免填充覆盖部分描边效果

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