Объединение двух или более элементов Canvas с некоторым смешиванием

Question

Можно ли объединить содержимое двух отдельных элементов холста в один элемент холста?

Что-то вроде эквивалента "Сглаживания" двух или более слоев в Photoshop ...?

Я могу придумать способ, но не уверен в этом.Я экспортирую содержимое обоих canvi (lol) в форме .png, а затем с помощью третьего элемента canvas рисую оба изображения с помощью какого-то алгоритма смешивания (xor, blend, негатив и т. Д.).

Answer 1

Конечно, вы можете, и вам не нужны смешные библиотеки или что-то еще, просто позвоните drawImage с изображением холста.

Вот пример, где я объединяю два элемента canvas в третий:

http://jsfiddle.net/bnwpS/878/

Конечно, вы можете сделать это только с двумя (один на другой), но три - лучший пример.

Вы всегда можете изменить globalCompositeOperation, если вам нужен эффект XOR или что-то в этом роде.

Answer 2

Если вы хотите «Нормальный» режим смешивания

• Убедитесь, что у ваших canvas элементов нет фона, указанного в CSS.Это сделает их прозрачными.

• Абсолютно разместите все ваши элементы canvas друг над другом.Например, оберните их все в <div class="canvas-layers">, а затем используйте CSS, например:

   /* Set to the same width/height as the canvases */
  .canvas-layers { position:relative; width:400px; height:300px }
  .canvas-layers canvas { position:absolute; top:0; left:0 }
  

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

Если вам нужен «нормальный» режим наложения на одном холсте

• Если вам абсолютно необходимо свести их на один холст (например, вы хотите создатьданные uri из результата), затем используйте drawImage с одним холстом в качестве источника «изображение».Например, см .:
  https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Using_other_canvas_elements

Если вы хотите простую маскировку, светлее или темнее

• Используйте свойство globalCompositeOperation контекста холста ииспользуйте drawImage с одним холстом в качестве источника.Смотрите пример здесь:
  https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Если вы хотите режимы наложения в стиле Photoshop

• Я создал простой, легкий, открытыйисходная библиотека для выполнения режимов наложения в стиле Photoshop из одного контекста HTML-холста в другой: context-blender .Вот пример использования:

  // Might be an 'offscreen' canvas
  var over  = someCanvas.getContext('2d');
  var under = anotherCanvas.getContext('2d');
  
  over.blendOnto( under, 'screen', {destX:30,destY:15} );
  

  См. README для получения дополнительной информации.

Answer 3

Я думаю, вы ищете что-то вроде библиотеки pixastic ( Документация ).

Answer 4

Вы можете с помощью css position 2 (или более) полотна друг над другом и позволить каждому работать как слой.Я не уверен, как именно это сделать с помощью css, но я сделал нечто похожее, мне пришлось полотить поверх друг друга, один для 2d-контента и один для webgl, и пользователь мог легко переключаться между ними

<div height="640" style="position: absolute;">
    <canvas width="640" style="position: absolute;visibility: hidden;" height="640" tabindex="1"></canvas>
    <canvas width="640" height="640" style="visibility: hidden;position: absolute;"></canvas>
</div>

Я предполагаю, что код не является ни пулевым, ни правильным, но он работает.Надеюсь это поможет.

Если это не так, я бы использовал обходной путь, который вы упомянули.(На самом деле я создал такое приложение, в котором я рисовал 2d тени на неэкранном холсте и рисовал поверх основного холста с прозрачностью, выглядел довольно аккуратно)