Получение холста, чтобы быть прозрачным - PullRequest
Новая
       3

Получение холста, чтобы быть прозрачным

0 голосов
/ 19 января 2019

Итак, я нашел стиль волны, который мне понравился на codepen. Я не собираюсь заниматься дизайном самостоятельно, я хочу сосредоточиться на серверной части своего сайта, а не на интерфейсе. Но все же хочу потрясающий пользовательский интерфейс. В любом случае я хочу знать, знает ли кто-нибудь, как сделать холст таким, чтобы он был прозрачным.

У меня есть приложение, которое я создал, это простая заставка. Я просто хочу сделать так, чтобы, когда пользователь нажимал больше информации, волна двигалась вверх и позволяла ему принять условия использования ...

Вот ссылка на код ручки:

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();
};

Снова я ищу, как заставить холст отображать то, что за ним стоит. Остальное прямо вперед.

1 Ответ

0 голосов
/ 19 января 2019

Каждый пиксель холста имеет четыре 8-битных байта информации о цвете, один для красного, один для зеленого, один для синего и один для непрозрачности. Значение байта непрозрачности 0 полностью прозрачно, а значение 255 соответствует полностью непрозрачному.

Все пиксели холста изначально прозрачны: буфер байтов для холста заполнен нулями.

Если хотите, чтобы волна была полупрозрачной, цвета, используемые для ее создания, должны иметь информацию о непрозрачности в их значении цвета . Цветные строки, отображаемые на ручке, не указывают никакого значения альфа-канала и по умолчанию полностью непрозрачны.

Пожалуйста, проверьте ссылку MDN, но я подозреваю, что наиболее надежная поддержка браузера будет для значений цвета CSS в формате "rgba( red, geen, blue, alpha)".

...