Определите, сколько элементов Canvas заполнено в HTML5

Question

Я только начал с HTML5, и у меня есть программа рисования, где пользователь может заполнить холст, щелкнув кнопку мыши и перетаскивая курсор, как ручку. Я хочу иметь возможность выяснить, какой процент холста в настоящее время заполнен пером. Как я мог это сделать? Вот мой текущий код на Gist Спасибо!

Answer 1

Вы можете получить все необработанные значения пикселей <canvas> используя вызов getImageData()

https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D

Затем вы перебираете эти данные пикселей в цикле Javascript и подсчитываете все пиксели, которые не имеют фонового цвета.

Процент заполненного холста

 completed = filledInPixels / (canvas.width * canvas.height)

Обратите внимание, что getImageData() Вызов очень медленный, и вы можете звонить только один раз в секунду.