HTML5 Canvas: композитинг

Введение

По умолчанию изображения накладываются на холст в порядке рисования, а новые изображения накладываются поверх старых изображений. В компьютерной графике альфа-композитинг — это процесс объединения изображения с фоном для создания видимости частичной или полной прозрачности. Часто бывает полезно визуализировать элементы изображения в отдельных проходах, а затем объединять полученные несколько 2D-изображений в одно окончательное изображение в процессе, называемом составным.

На веб-странице фон является самым нижним слоем, за которым следуют любые элементы HTML, расположенные под элементом холста. Далее идет любой фон CSS, примененный к элементу холста, за ним следует все, что нарисовано на холсте, с самым последним изображением, линией или формой на верхнем слое.

Элемент холста также поддерживает глобальный альфа-канал. Для глобального альфа-канала может быть установлено любое значение от 0,0 до 1,0 (значение по умолчанию), где 0,0 означает полную прозрачность, а 1,0 означает отсутствие прозрачности.

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

Global Alpha

Глобальное альфа-значение позволяет рисовать с разной степенью прозрачности. Свойство globalAlpha контекста возвращает текущее альфа-значение, применяемое к операциям визуализации. Может быть установлен, чтобы изменить значение альфа.

 ctx.globalAlpha [= value] 

Примечание. Значения за пределами диапазон 0,0 … 1,0 игнорируется.

В следующем веб-документе показаны различные изображения с прозрачностью от 0 до 1:

Вывод:

Код:

      Прозрачность холста HTML5       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //Получаем контекст для рисования.  for (var g = 0, x = 0, y = 25; g   

свойство globalCompositeOperation

Атрибут globalCompositeOperation устанавливает способ рисования фигур и изображений на существующее растровое изображение после применения globalAlpha и текущей матрицы преобразования. Для него должно быть установлено значение из следующего списка. В приведенных ниже описаниях исходное изображение A - это форма или изображение, которое визуализируется, а целевое изображение B - это текущее состояние растрового изображения.

Синтаксис:

 ctx. globalCompositeOperation [= значение]  

Значения свойств:

Параметры Описание
source-atop A поверх B
  • Отображать исходное изображение там, где оба изображения непрозрачны.
  • Отображать целевое изображение везде, где конечное изображение непрозрачно, но исходное изображение прозрачно.
  • Отображать прозрачность в другом месте.
source-in A in B
  • Отображать исходное изображение везде, где и исходное, и конечное изображение непрозрачны .
  • Отображать прозрачность в другом месте.
Исходный код A out B
  • Исходное изображение копируется из целевого изображения.
  • Исходное изображение отображается там, где источник непрозрачен, а место назначения прозрачно.
  • Другие области прозрачны.
источник-ов er A поверх B
  • Отображать исходное изображение везде, где исходное изображение непрозрачно.
  • Отобразить изображение назначения в другом месте.
destination-atop B на вершине A.
  • Отображать исходное изображение везде, где оба изображения непрозрачны.
  • Отображать конечное изображение везде, где конечное изображение непрозрачно, но исходное изображение прозрачно.
  • Отображать прозрачность в другом месте.
destination-in B в A
  • Отображать исходное изображение там, где и исходное, и конечное изображение непрозрачны.
  • Отображать прозрачность в другом месте.
destination-out B out A
  • Исходное изображение копируется из целевого изображения.
  • Исходное изображение отображается там, где источник непрозрачен, а место назначения прозрачный.
  • Остальные области прозрачны.
destination-over B over A
  • Отображать исходное изображение везде, где исходное изображение непрозрачный.
  • Отображать изображение назначения в другом месте.
lighter A плюс B Отобразить сумму исходного изображения и конечного изображения с цветовыми значениями, приближающимися к 255 (100%) в качестве предела.
copy

A (B игнорируется)

Отображать исходное изображение вместо целевого изображения .
xor A xor B Исключительное ИЛИ исходного изображения и целевого изображения .
vendorName-operationName Расширения, зависящие от поставщика для списка операторов композиции следует использовать этот синтаксис.

Следующий веб-документ рисует прямоугольник и круг:


Код:

      HTML5 Canvas прямоугольник и круг      var canvas = document.getElementById (  "MyCanvas"); if (canvas.getContext)//Проверка на поддержку. {Var ctx = canvas.getContext ("2d");//рисование зеленого прямоугольника ctx.beginPath (); ctx.rect (100, 20, 100  , 100); ctx.fillStyle = 'green'; ctx.fill ();//рисуем красный круг ctx.beginPath (); ctx.arc (190, 120, 60, 0, 2 * Math.PI, false);  ctx.fillStyle = 'red'; ctx.fill ();}   </code> </pre>
<p> Позвольте установить значения свойства globalCompositeOperation контекста один за другим  в приведенном выше примере. </p>
<p> <strong> Пример - 1: </strong> значение свойства globalCompositeOperation: source-atop </p>
<p> <strong> Вывод:  </strong> </p>
<p><img class="lazy lazy-hidden" src="//nanomode.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="/images/coding/708/foto-2.png"><noscript><img src="/images/coding/708/foto-2.png"></noscript></p>
<p> <strong> Код: </strong>  </p>
<pre> <code>    <title> HTML5 Canv  как задано глобальное соединение - источник поверх       var canvas = document.getElementById  ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (пункт назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный композит - источник поверх ctx.globalCompositeOperation = 'source-atop'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }     

Пример - 2: значение свойства globalCompositeOperation: исходный код

Вывод:


Код:

      Глобальный составной элемент холста HTML5 - исходный код       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный композит - входной источник ctx.globalCompositeOperation = 'входной источник'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx. наполнять();  }    

Пример - 3: значение свойства globalCompositeOperation: исходный-выход

Вывод:

Код:

      Глобальный композитный набор холста HTML5 - исходный код       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный композит - исходный код ctx.globalCompositeOperation = 'source-out'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 4: значение свойства globalCompositeOperation: source-over

Вывод:

Код:

      Глобальный композитный набор холста HTML5 - исходный код       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный композит - над исходным кодом ctx.globalCompositeOperation = 'source-over'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 5: значение свойства globalCompositeOperation: destination-atop

Вывод:

Код:

      Глобальный составной элемент холста HTML5 - назначение поверх       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx. наполнять(); //установить глобальный составной элемент - наверху назначения ctx.globalCompositeOperation = 'destination-atop'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 6: значение свойства globalCompositeOperation: пункт назначения

Вывод:

Код:

      Глобальный составной набор холста HTML5 - назначение-в       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный составной элемент - входной пункт назначения ctx.globalCompositeOperation = 'входной пункт назначения'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 7: значение свойства globalCompositeOperation: destination-out

Вывод:

Код:

      Глобальный составной набор холста HTML5 - назначение-выход       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный составной - целевой-выход ctx.globalCompositeOperation = 'destination-out'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 8: значение свойства globalCompositeOperation: destination-over

Вывод:

Код:

      Глобальный составной набор холста HTML5 - destination-over       var canvas = document. getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //устанавливаем глобальный составной объект - поверх назначения ctx.globalCompositeOperation = 'destination-over'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 9: значение свойства globalCompositeOperation: lighter

Вывод:

Код:

      Глобальный составной элемент холста HTML5 - светлее       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный композит - светлее ctx.globalCompositeOperation = 'lighter'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 10: значение свойства globalCompositeOperation: копия

Вывод:

Код:

      Глобальный составной набор холста HTML5 - копия       var canvas = document.getElementById ("MyCanvas");  if (canvas.getContext)//Проверка на поддержку.  {var ctx = canvas.getContext ("2d"); //рисуем зеленый прямоугольник (место назначения) ctx.beginPath ();  ctx.rect (100, 20, 100, 100);  ctx.fillStyle = 'зеленый';  ctx.fill (); //установить глобальный составной объект - копировать ctx.globalCompositeOperation = 'copy'; //рисуем красный кружок (исходный) ctx.beginPath ();  ctx.arc (190, 120, 60, 0, 2 * Math.PI, ложь);  ctx.fillStyle = 'красный';  ctx.fill ();  }    

Пример - 11: значение свойства globalCompositeOperation: xor

Вывод:

Код:

      HTML5 Canvas установить глобальный составной элемент - скопировать       var canvas = document.  getElementById ("MyCanvas"); if (canvas.getContext)//Проверяем наличие поддержки. {var ctx = canvas.getContext ("2d");//рисуем зеленый прямоугольник (место назначения) ctx.beginPath (); ctx.rect (  100, 20, 100, 100); ctx.fillStyle = 'green'; ctx.fill ();//устанавливаем глобальную композицию - xor ctx.globalCompositeOperation = 'xor';//рисуем красный кружок (исходный) ctx.beginPath (  ); ctx.arc (190, 120, 60, 0, 2 * Math.PI, false); ctx.fillStyle = 'red'; ctx.fill ();}      

Редактор кода:

См. общий редактор Pen html css от w3resource (@ w3resource) onCodePen. р>

Оцените статью
nanomode.ru
Добавить комментарий