让画布透明答案

【问题标题】：Getting the canvas to be transparent让画布透明
【发布时间】：2019-06-13 07:11:40
【问题描述】：

所以我在 codepen 上找到了我喜欢的波形样式。我不会自己设计，我想专注于我网站的后端，而不是 UI。但仍然想要令人惊叹的 UI。无论如何，我想知道是否有人会知道如何制作画布以使其透明。

我有一个应用程序，我创建了一个简单的启动页面。我只是想让它在用户按下更多信息时向上移动并允许用户接受使用条款...

这里是代码笔的链接：

https://codepen.io/RTarson/pen/375507d01a90fd265b030abec49b78ac

/*========================================
   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); // -$.h - Vertically reflection
  $.ctx.lineTo(0, -$.h); // -$.h - Vertically reflection
  $.ctx.closePath();
  $.ctx.fillStyle = color;

  if (comp) {
    $.ctx.globalCompositeOperation = comp;
  }

  $.ctx.fill();
};

我再次在寻找如何让画布显示它背后的东西。其余的都是直截了当的。

【问题讨论】：

How do I make a transparent canvas in html5?的可能重复
@David784 在给我看之前已经读过了。没有帮助
如果我在你的代码笔中评论//$.ctx.fillStyle = "#182645";，我可以透过波浪看到你的背景。你的画布是透明的，但内容不是。
@David784 是的，但我只需要白色部分是透明的

标签： javascript css babeljs

【解决方案1】：

每个画布像素都有四个 8 位字节的颜色信息，一个用于红色，一个用于绿色，一个用于蓝色，一个用于不透明度。 opacity 字节值为 0 表示完全透明，值为 255 对应于完全不透明。

所有画布像素最初都是透明的：画布的字节缓冲区是零填充的。

如果希望波浪是半透明的，用于创建它的颜色需要在其color value 中包含不透明度信息。笔中显示的颜色字符串不指定任何 Alpha 通道值，默认为完全不透明。

请检查 MDN 链接，但我怀疑最可靠的浏览器支持将是“rgba( red, geen, blue, alpha)”格式的 CSS 颜色值。

【讨论】：