Question

因此，我在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();
};

再次，我正在寻找如何使画布显示其背后的内容。其余的很简单。

Answer 1

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

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

如果要使波形半透明，则用于创建波形的颜色必须在其color value中具有不透明度信息。笔中显示的颜色字符串未指定任何Alpha通道值，默认为完全不透明。

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

使画布透明

1 个答案: