Пользовательская форма и заливка в HTML5 canvas

Question

У меня есть небольшой проект, я работаю на холсте HTML5, и я хотел бы получить некоторые идеи, как это сделать. Я построил схему дерева, используя все функции линии холста. lineTo, bezierCurveTo, quadracticCurve и т. д. Я приложил изображение контура. Теперь, что я хотел бы сделать, это иметь некоторый код, который заполняет процент от этой схемы. Вроде как индикатор выполнения, начинающийся снизу. У кого-нибудь есть идеи как это сделать?

Спасибо

Answer 1

Вместо того, чтобы думать о проблеме, как о необходимости заполнить процент внутри дерева, почему бы не разделить изображение на два слоя, дерево и «заливку», а затем нарисовать один поверх другого. Смотрите мое изображение ниже для быстрого и грязного примера.

Конечно, вам нужно будет скрыть оставшуюся часть слоя «заливка», поэтому вам нужно будет заполнить внешнюю поверхность дерева белым цветом, но это должно быть довольно легко, поскольку у вас уже есть проработанный путь. По сути, ваш путь вместо того, чтобы быть внешним краем в форме дерева, стал бы внутренним краем отверстия в форме дерева!