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

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

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

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

Источник

4 ответа

Решение

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

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

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

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

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

Источник

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

  • Убедитесь, что ваш 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

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

Если вы хотите режимы смешивания в стиле 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 для получения дополнительной информации.

Источник

Вы можете с помощью 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 тени на холсте за пределами экрана и рисовал поверх основного холста с прозрачностью, выглядел довольно аккуратно)

Источник

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

Источник
Другие вопросы по тегам