Контроллер холста HTML5?

Ответ 1

EDIT: этот ответ не работает на новых версиях хром: инспектор хромового холста 2015

В Chrome Canary:

• в вашем браузере, введите этот url chrome://flags/
• включить Включить эксперименты с инструментами разработчика
• перезапустить Chrome
• в инструментах разработчика, нажмите "передача", чтобы вызвать настройки разработчика.
• выберите эксперименты из меню
• выберите "Проверка холста"
• закрыть devtools, обновить страницу, повторно открыть devtools

Полный путеводитель по профайлу холста: http://www.html5rocks.com/en/tutorials/canvas/inspection/

Анимированный gif, показывающий его в действии: https://twitter.com/umaar/status/480705624448045057

Ответ 2

Canvas 'не является частью DOM, поэтому вы не можете проверить его содержимое. Как вы правильно указали, инспекторы могут проверять только DOM, поэтому холст выходит из сферы действия. Вы можете проверить содержимое холста в консоли вашего devtools, но

yourcanvas.toDataURL();

и проверьте выходные данныеURL на соседней вкладке.

Ответ 3

На холсте HTML5 нет объектов. Есть только пиксели. Когда вы рисуете фигуру, холст взмахивает своей палочкой, появляются пиксели, а затем забывает, что что-то даже произошло.

Как и многие другие, вы можете отслеживать, что вы рисуете на холсте, чтобы иметь постоянные объекты для перерисовки. Я написал несколько популярных руководств по этому вопросу, и, без сомнения, если вы будете искать, вы найдете больше.

Когда вы создаете свою систему постоянных объектов, вы почти наверняка захотите включить много кода отладки, который выводит легко понятные списки объектов и их координаты. Многие люди предпочитают делать это с помощью операторов console.log, которые выводят любые строки, которые вы хотите для консоли разработчика (часть инструментов разработчика F12 в большинстве современных браузеров).

Но это. То, что вы строите, это то, что вы можете использовать для проверки вещей.

Ответ 4

В настоящий момент нет возможности проверить содержимое холста, но в случае с WebGL вы можете использовать расширение WebGL Inspector для Google Chrome, поэтому я думаю, что можно сделать аналогичное расширение для Canvas. но он не работает, как обычные инспекторы DOM.

Вот функции WebGL Inspector:

• Расширение для ввода страниц
• Вставить в существующее приложение с одним script включить
• Захват всех кадров GL
• Аннотированный журнал вызовов с навигацией по шагам/ресурсам и предупреждения о избыточных вызовах
• История пикселов - просмотр всех вызовов рисования, которые способствовали отображению информации о пикселях + +.
• Состояние состояния GL
• Браузеры ресурсов для текстур, буферов и программ

Надеюсь, что я не внедорожник, но на данный момент нет растрового или векторного холста инспектор.

Ответ 5

Обработать холст как маску ms. Нет объектов, есть только пиксели и методы, чтобы поместить их на экран.