HTML5 холст инспектор?

Question

Есть ли возможность проверять объекты, отображаемые на холсте HTML5, как мы можем это сделать в Silverlight с Silverlight Spy?

Если я использую инспектор элементов Chrome, я могу проверять только DOM.

Answer 1

РЕДАКТИРОВАТЬ: этот ответ не работает на новых версиях Chrome см. Инспектор Chrome Canvas 2015

В Chrome Canary:

1. в браузере введите этот URL chrome://flags/
2. enable Включить эксперименты инструментов разработчика
3. перезапустите Chrome
4. в инструментах разработчика, нажмите кнопку«снаряжение» для вызова настроек разработчика
5. выберите эксперименты из меню
6. выберите Проверка холста
7. закрыть devtools, обновитьстраницы, откройте devtools

---

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

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

Answer 2

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

yourcanvas.toDataURL();

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

Answer 3

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

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

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

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

Answer 4

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

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

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

Будем надеяться, что я не бездорожье, но нетРастровый или векторный холст инспектор на данный момент.

Answer 5

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