HTML5 Canvas Прогрессивное заполнение и прозрачная реализация эффекта маски изображения

Комментарий: В этой статье подробно расскажут о настройках и использовании прозрачности в холсте. Сочетая постепенное заполнение и поддержку прозрачности, он может реализовать эффект маски изображения. Линейная демонстрация кода прогрессивного метода выглядит следующим образом. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для всех.

1: градиент

Canvas поддерживает два метода инкрементного заполнения, один из них - линейное инкрементное заполнение (градиент линии), а другой называется

Радиалградит заполнение. Их API:

CreateLinearGradient (X1, Y1, X2, Y2);

где X1 и Y1 являются координатами первой точки, а X2 и Y2 являются координатами второй точки.

CreateRadialGradient (x1, Y1, R1, X2, Y2, R2);

Где X1 и Y1 являются координатами первой центральной точки, R1 - это радиус, x2 и Y2 - координаты второй центральной точки, а R2 - радиус.

Установите цвет для каждой точки

addColorStop (положение, цвет);

Где положение представляет позицию, диапазон размеров [0 ~ 1], где 0 представляет первую точку, а 1 представляет координаты второй точки

Цвет представляет значение цвета, значение цвета любого CSS.

После того, как объект Progressive Fill создан и настроен, его можно использовать для установки текста реализации контекста и реализации контекста.

Прогрессивное цветовое заполнение геометрических фигур.

Демонстрация кода линейного прогрессивного подхода:

1. Цветовой прогрессив в вертикальном (Y) направлении

// Вертикальное/Y направление

var lineGradient = ctx.createLinearGradient (50, 0, 50, 200);

lineGradient.AddColorStop (0, 'rgba (255, 0, 0, 1)');

LineGradient.AddColorStop (1, 'rgba (255, 255, 0, 1)');

ctx.fillstyle = lineGradient;

ctx.fillrect (0, 0, 300, 300);

2. Горизонтальный (x) Цветовой прогресс направления

// Горизонтальное/x направление

var linegradient = ctx.createlineargradient (0, 50, 200, 50);

lineGradient.AddColorStop (0, 'rgba (255, 0, 0, 1)');

LineGradient.AddColorStop (1, 'rgba (255, 255, 0, 1)');

ctx.fillstyle = lineGradient;

ctx.fillrect (0, 0, 300, 300);

3. Вертикальный и горизонтальный одновременно (xy направление) цветовой прогрессив

// Вертикальное и горизонтальное направление

var lineGradient = ctx.createLinearGradient (0, 0, 200, 200);

lineGradient.AddColorStop (0, 'rgba (255, 0, 0, 1)');

LineGradient.AddColorStop (1, 'rgba (255, 255, 0, 1)');

ctx.fillstyle = lineGradient;

ctx.fillrect (0, 0, 300, 300);

2: прозрачный

Поддержка прозрачности в холсте делится на глобальные и локальные настройки прозрачности. Настройки глобальной прозрачности могут быть установлены

Context.globalalpha реализован. Локальная прозрачность может быть установлена ​​через канал заполнения к альфа -значению в значении цвета

Чтобы достичь этого. Два метода кода следующие:

// Изменение глобальной альфа -значения

ctx.globalalpha = 0,5;

ctx.fillrect (50,50,75,50);

// Изменить альфаханал стиля заполнения в альфаханал

ctx.fillstyle = 'rgba (225,225,225,0,5)';

ctx.fillrect (50,50,75,50);

Два эффекта одинаковы.

Три: прозрачный и постепенный эффект фотографий маски

Используйте изменения радиального цветового градиента и прозрачности для достижения полупрозрачного эффекта маски на изображение и эффект запуска скрипта:

var myimage = document.createElement ('img');

myimage.src = "../test.png";

myimage.onload = function () {

ctx.drawimage (myimage, 80, 30, myimage.naturalwidth, myimage.naturalheight);

var RadialGradient = ctx.createradialGradient (canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 200);

RadialGradient.AddColorStop (0, 'rgba (247, 247, 247, 0)');

RadialGradient.AddcolorStop (0,7, 'rgba (120, 120, 120, 0,5)');

RadialGradient.AddColorStop (0,9, 'rgba (0, 0, 0, 0,8)');

RadialGradient.AddColorStop (1, 'rgba (238, 238, 238, 1)');

ctx.beginpath ();

ctx.arc (canvas.width/2, canvas.height/2, 300, 0, math.pi * 2, true);

ctx.closepath ();

ctx.fillstyle = RadialGradient;

ctx.fill ();

}