Сочетание двух или нескольких элементов холста с каким-то смешением

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

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

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

Ответ 1

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

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

http://jsfiddle.net/bnwpS/15/

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

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

Ответ 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 контекста canvas и используйте drawImage с одним холстом в качестве источника. См. Пример здесь:
https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

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

Я создал простую, легкую библиотеку с открытым исходным кодом для выполнения режимов смешивания в стиле Photoshop из одного контекста HTML Canvas в другой: 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.

Ответ 3

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

Ответ 4

Вы можете с помощью css позиции 2 (или больше) холстов друг над другом и пусть каждый работает как слой. Я не уверен. Точно, как это сделать с помощью css, но я сделал что-то подобное, должен иметь холсты над eachother, один для 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>

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

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