HTML5 Canvas如何绘制带彩色边框的透明线条

你可以通过全局合成模式来实现需求，无需覆盖细线条，也不用将父元素背景移入Canvas。核心思路是先绘制完整的粗线条作为边框基底，再用destination-out模式挖掉线条中间区域，留下透明内部与彩色边框。

具体实现代码如下：

const canvas = document.getElementsByTagName('canvas')[0],
  ctx = canvas.getContext('2d');

// 定义目标曲线路径
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(100, 10, 150, 75);
ctx.quadraticCurveTo(200, 140, 300, 100);
ctx.lineCap = 'round';

// 第一步：绘制外层彩色边框（20px粗）
ctx.lineWidth = 20;
ctx.strokeStyle = '#f00';
ctx.stroke();

// 切换合成模式：后续绘制内容会从画布现有像素中移除
ctx.globalCompositeOperation = 'destination-out';

// 第二步：绘制内层细线条，挖掉中间区域（线条宽度 = 外层宽度 - 2*边框厚度）
// 示例中预留2px边框，所以内层宽度设为20 - 2*2 = 16px
ctx.lineWidth = 16;
ctx.stroke();

// 恢复默认合成模式，避免影响后续绘制
ctx.globalCompositeOperation = 'source-over';

<canvas width="350" height="150" style="border: 1px #303030 solid; background: transparent;"></canvas>

原理说明 #

• destination-out合成模式的作用是“擦除”：后续绘制的区域会从画布已有的像素中减去
• 两次绘制同一路径，通过线条宽度差控制边框厚度：边框厚度 = (外层线条宽度 - 内层线条宽度) / 2
• 最终Canvas仅保留彩色边框区域，内部完全透明，父元素背景可正常透出

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