По сути, вы хотите сделать что-то, чего можно достичь с помощью большинства программ для редактирования изображений. Canvas может быть очень мощным, если вы пишете сценарии для манипулирования им. Например, при использовании CanvasContext (полученного через getContext ("2d") на элементе canvas) вы можете получить и поместить данные изображения, которые в основном представляют собой набор пикселей, представленных 4 байтами каждый (RGBA). Это означает, что вы получите массив длиной Ширина * Высота * 4 .
Теперь я не эксперт в области манипулирования изображениями / холстами, так что то, что я предлагаю, возможно, будет гораздо проще. Если вы хотите изменить оранжевую часть изображения, например, закрасить изображение (или простым цветом) в любом программном обеспечении для редактирования изображений, это означает, что вам нужно использовать маску . Насколько я знаю, здесь, чтобы использовать маску, вам придется:
- Ваше изображение должно быть нарисовано на элементе canvas, чтобы манипулировать им.
- Создание вторичного холста рабочей области.
- Нарисуйте кисть (изображение, которое вы хотите нарисовать) на рабочем пространстве.
- Получить данные изображения рабочей области холста.
- Заменить альфа-канал полученных ImageData (на тот, что на изображении исходного холста)
- Очистить холст рабочей области.
- Поместите новые данные изображения на холст рабочей области.
- Нарисуйте холст рабочей области на оригинальном холсте.
Это означает, что ваша кисть (простой цвет) будет иметь примененный альфа-канал, который имеет ту же форму, что и оранжевая часть исходного изображения.
Теперь, по крайней мере, в Chrome, существует проблема с этим изображением из imageshack, и это то, что вы не можете получить imageData элемента canvas, нарисованного с изображением из внешнего домена. Это приведет к исключению, говорящему, что холст был испорчен данными из других доменов. Это означает, что изображение, которым вы хотите манипулировать, должно быть размещено в том же домене, что и ваш тестовый сайт. (Вы должны проверить документацию холста, чтобы увидеть, как этого избежать).
Обратите внимание, что это нацелено на нечто более мощное, чем просто изменение цвета формы. Если вы просто хотите изменить его цвет , вы можете просто манипулировать каналами RGB imageData исходного холста, пока не найдете нужный цвет.
Некоторые полезные ссылки: