p5.js中如何绘制透明形状且避免描边覆盖填充区域？

这个问题其实是p5.js默认绘制顺序和半透明叠加导致的：默认情况下，p5会先绘制填充区域，再绘制描边，而描边的一半宽度是覆盖在填充区域上的——因为两者都带有alpha值，叠加后颜色会比单纯的描边或填充更深，所以看起来像是出现了双层边框。

不用手动调整顶点坐标，这里有个非常简便的解决方案，利用Canvas的合成模式来改变绘制层级：

function setup() { 
  createCanvas(60, 60); 
}
function draw() { 
  background(255); 

  // 第一步：先绘制描边（不填充）
  noFill();
  stroke(50, 127); 
  strokeWeight(5); 
  rect(10, 10, 40, 40); // 这里换成你的复杂多边形也一样

  // 第二步：设置合成模式为destination-over，让后续绘制的内容放在已有内容下方
  drawingContext.globalCompositeOperation = 'destination-over';

  // 第三步：绘制填充（不描边）
  noStroke();
  fill(127, 127); 
  rect(10, 10, 40, 40); // 重复绘制同一个形状

  // 第四步：恢复默认合成模式，避免影响后续其他绘制
  drawingContext.globalCompositeOperation = 'source-over';
}

原理说明 #

destination-over这个合成模式会让新绘制的图形（填充）被放置在已经存在的图形（描边）的下方，这样描边就不会和填充区域重叠叠加，半透明的描边只会显示在形状的外侧，完美解决双层边框的问题。

这个方法完全不需要修改复杂多边形的顶点坐标，只要重复绘制一次形状即可，非常高效。

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