如何让网页Canvas实现透明效果？附Wave代码示例

嘿，刚好能帮你搞定这个Canvas透明的问题！你的核心需求是让波浪以外的Canvas区域保持透明，这样后方的用户协议内容就能透出来，对吧？问题出在你当前的波浪绘制路径上，我给你一步步讲怎么改：

问题根源 #

你现在的$.wave函数里，绘制完波浪线后调用了这两行：

$.ctx.lineTo($.w, -$.h); // -$.h - Vertically reflection
$.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection

它们把路径延伸到了画布外部的顶部区域，闭合路径填充后，整个画布从波浪线到顶部的区域都被颜色覆盖，自然就挡住了后方内容。

解决方案：修改填充路径 #

我们只需要调整路径，让它只填充波浪和画布底部之间的区域，这样波浪上方的Canvas区域就会保持透明。修改后的完整函数代码如下：

/*======================================== Wave ========================================*/
$.wave = function (color, amp, height, comp) {
  $.ctx.beginPath();
  var sway = $.simplex.noise2D($.goff, 0) * amp;
  for (var i = 0; i <= $.count; i++) {
    $.xoff += $.xinc;
    var x = $.cx - $.length / 2 + $.length / $.count * i,
        y = height + $.simplex.noise2D($.xoff, $.yoff) * amp + sway;
    $.ctx[i === 0 ? 'moveTo' : 'lineTo'](x, y);
  }
  // 👇 修改这两行：将路径延伸到画布底部，而非顶部外区域
  $.ctx.lineTo($.w, $.h); // 波浪终点连接到画布右下角
  $.ctx.lineTo(0, $.h);   // 画布右下角连接到左下角
  $.ctx.closePath();
  
  $.ctx.fillStyle = color;
  if (comp) {
    $.ctx.globalCompositeOperation = comp;
  }
  $.ctx.fill();
};

额外注意事项 #

• 确保你的Canvas元素在CSS里没有设置background属性，保持默认的透明状态；
• 如果你的全局合成模式（comp参数）用了特殊值（比如"destination-over"），可能会影响透明效果，建议保持默认的"source-over"即可；
• 点击“更多信息”让波浪上移时，只需要调整height参数的值（减小数值，让波浪整体上移），就能露出下方的用户协议内容，完全不影响透明效果。

这样修改后，Canvas就只有波浪形状的部分有颜色，其余区域都是透明的，后方内容就能正常显示啦！

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