如何在单个HTML Canvas中实现同色重叠形状的无伪描边视觉融合

当然可以不用双Canvas解决这个问题！核心原因是你两次分开填充路径时，每个路径的边缘都会触发Canvas的抗锯齿处理——哪怕颜色完全一致，这些边缘的细微像素差异也会让两个形状看起来有区分度。下面给你两种可行的解决方案：

方案1：合并路径，单次填充（最优） #

把两个三角形的路径合并到同一个beginPath()和fill()操作中，这样Canvas会将它们视为一个整体形状，只会处理外边缘的抗锯齿，内部重叠部分不会产生额外的视觉边界。

修改后的代码如下：

var c= document.getElementById('canvas')
var ctx =c.getContext('2d')
var b=c.width
ctx.fillStyle="#00f"

// 合并两个三角形到同一个路径
ctx.beginPath()
// 第一个三角形路径
ctx.moveTo(b,b)
ctx.lineTo(0,0)
ctx.lineTo(b,b/2)
// 第二个三角形路径（无需重新调用beginPath）
ctx.moveTo(0,b)
ctx.lineTo(b,0)
ctx.lineTo(0,b/2)
ctx.fill() // 单次填充所有子路径

<canvas id="canvas" width="300" height="300"></canvas>

注：fill()方法会自动填充所有已定义的子路径，不需要单独闭合每个三角形的路径，最终效果就是两个三角形合并成的单一视觉形状。

方案2：使用合成模式规避边缘叠加 #

如果因为某些原因无法合并路径（比如动态生成形状），可以使用Canvas的globalCompositeOperation属性，让第二个形状绘制在第一个形状的下方，这样两个形状的边缘不会叠加产生视觉差异：

var c= document.getElementById('canvas')
var ctx =c.getContext('2d')
var b=c.width
ctx.fillStyle="#00f"

// 绘制第一个三角形
ctx.beginPath()
ctx.moveTo(b,b)
ctx.lineTo(0,0)
ctx.lineTo(b,b/2)
ctx.closePath()
ctx.fill()

// 设置合成模式：新绘制内容在已有内容下方
ctx.globalCompositeOperation = 'destination-over'

// 绘制第二个三角形
ctx.beginPath()
ctx.moveTo(0,b)
ctx.lineTo(b,0)
ctx.lineTo(0,b/2)
ctx.closePath()
ctx.fill()

// 恢复默认合成模式（如果后续还有绘制需求）
ctx.globalCompositeOperation = 'source-over'

<canvas id="canvas" width="300" height="300"></canvas>

这两种方法都能让两个同色形状看起来完全像一个整体，不需要额外的Canvas元素。

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