HTML-холст: вырезка и текст

Question

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

спасибо

Answer 1

Вы можете сделать это, но не используя клип.Клип работает только с путями, а текст не является путем.

Вам потребуется использовать второй холст в памяти (не на странице) для достижения эффекта.Вот как:

1. Создайте холст в памяти, установите его ширину и высоту, способные содержать текст
2. Нарисуйте текст на этом холсте в памяти
3. установите для globalCompositeOperation контекста в памяти значение 'source-in'
4. Нарисуйте нужную вещь в тексте
5. используйте drawImage(in-memory-canvas, x, y), чтобы поместить вновь созданный эффект в обычныйхолст