Анимация на Canvas?

Question

[Andrew]

Здравствуйте! Нужна помощь в Canvas анимации.
Есть следующая анимация codepen.io/juniorCh/pen/doEREw
Подскажите пожалуйста, как сделать так, чтобы при рисовании по картинке, когда картинка уже, например, на 90% изменила backround (зарисована), она меняла его полностью ( зарисована полностью)? Второй вопрос, как после этого запустить еще одну анимацию?
Буду очень благодарен за любую помощь)

Comments

[copal]

Мне кажется только закрашенные пиксели считать, больше ничего в голову не приходит. Если картинки очень большие, то возможно придется её на зоны разделять (квадраты или треугольники) и если они уже закрашены, то просто из счета их исключать. Рисунок это всего лишь массив с значениями номера цвета.
А как узнать сколько в массиве со ста элементами имеют значение? Посчитать!

Answer 1

[Vlad Harbarchuk]

блин, читал где-то раз 7 так и не понял что вы имеете в виду
Вы хотите чтобы сама картинка менялась после того как площадь зарисовки > 90% или чтобы менялся сам фон зарисовки?

Comments

[Максим Тимофеев]

Автор гений. Нам его не понять.

[Andrew]

Например, если я ее зарисовал на 90%, чтобы она зарисовалась до конца, в данном случае полностью стала красной. Чтобы вообще не было видно нижней картинки

[Александр Таратин]

Максим Тимофеев: Так сложно понять смысл слова "замальована" ? Если на китайском было написано,то еще можно понять ваши придирки.

[Andrew]

Александр Таратин: изменил)

Answer 2

[Александр Таратин]

https://developer.mozilla.org/ru/docs/Web/API/ImageData
По отпусканию мыши пробегаетесь по всем пикселям canvas и подсчитываете число красных пикселей.

UPD
codepen.io/andreruffert/pen/pvqly

Comments

[Andrew]

Спасибо, хоть что-то)