如何在Canvas中绘制宽度可变、色调均匀的半透明线条？

半透明压感线条出现接头处颜色加深，本质是Canvas 2D的渲染逻辑导致的：

• 每调用一次stroke()，当前路径就会独立完成栅格化，和画布已有像素做透明度混合
• 为了实现平滑曲线用了二次贝塞尔曲线+round圆形线帽，相邻分段的衔接区域、线帽区域会被多次描边
• 哪怕所有描边用的颜色、透明度完全一致，多次叠加的区域alpha值也会高于单段绘制区域，自然出现颜色更深的重叠痕迹

之前尝试的修改lineCap、换用globalAlpha设置透明度都没有触及「多次独立描边导致重复叠加」的核心问题：改用butt线帽会直接在线段衔接处出现断缝、锯齿，而globalAlpha和在色值里写透明度的渲染逻辑完全一致，自然不会有效果差异。

之前考虑的离屏蒙版方案是目前兼容性最好、效果最稳定的解法，而且实现成本远低于预期，不需要复杂的数学计算，只需要对原有绘图逻辑做极少量改动即可：

1. 创建一个和主画布尺寸完全一致的离屏Canvas，作为线条形状的蒙版层
2. 绘制单条笔画时，全程用完全不透明的纯色（比如纯黑#000000）在离屏Canvas上逐段绘制变宽线条，这时候所有重叠区域因为是不透明绘制，不会出现深浅差，最终得到形状完全准确、边缘平滑的线条轮廓
3. 单条笔画在离屏层绘制完成后，切回主画布，设置好你需要的半透明线条颜色，将globalCompositeOperation设为source-in，把离屏Canvas的内容一次性绘制到主画布对应位置，最后恢复默认混合模式即可

这个方案的额外性能开销极低：实时绘图时你只需要在每一笔开始时清空离屏画布，逐段绘制离屏层的过程和原来直接画主画布的渲染消耗几乎一致，最后一步混合是GPU加速的原生API操作，不会有卡顿。

注：不要尝试用单个Path2D路径解决变线宽问题——单个路径只能设置一个统一的lineWidth，要实现随压力动态变化的线宽，必须分段设置线宽后多次调用stroke()，无法绕开分段描边的逻辑。

// 主画布初始化
var mainCtx = document.getElementById('canvas1').getContext('2d');
// 创建离屏蒙版画布
const maskCanvas = document.createElement('canvas');
maskCanvas.width = 400;
maskCanvas.height = 400;
const maskCtx = maskCanvas.getContext('2d');
maskCtx.lineCap = 'round';

// 目标半透明颜色
const targetColor = '#ff000055';
var points = [null, null, null, null];

// 先在离屏蒙版上用纯不透明黑色绘制所有线段
for (var i = -1; i < 25; i = i + 1) {
  var width = 0.5 + i * 2;
  var m = 200;

  var x = Math.cos(i / 4) * 180;
  var y = Math.sin(i / 4) * 140;

  points[0] = points[1];
  points[1] = points[2];
  points[2] = { X: x, Y: y };

  if (points[0] == null) continue;

  var p0 = points[0], p1 = points[1], p2 = points[2];
  var x0 = (p0.X + p1.X) / 2, y0 = (p0.Y + p1.Y) / 2;
  var x1 = (p1.X + p2.X) / 2, y1 = (p1.Y + p2.Y) / 2;

  maskCtx.beginPath();
  maskCtx.lineWidth = width;
  maskCtx.strokeStyle = '#000000'; // 蒙版用纯不透明黑色
  maskCtx.moveTo(m + x0, m + y0);
  maskCtx.quadraticCurveTo(m + p1.X, m + p1.Y, m + x1, m + y1);
  maskCtx.stroke();
}

// 将离屏蒙版作为形状，填充目标半透明颜色到主画布
mainCtx.save();
mainCtx.fillStyle = targetColor;
mainCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
mainCtx.globalCompositeOperation = 'source-in';
mainCtx.drawImage(maskCanvas, 0, 0);
mainCtx.restore();

对应的HTML代码：

<canvas id="canvas1" width="400" height="400" style="border: 1px solid black;"></canvas>

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