¿Hay alguna posibilidad de inspeccionar los objetos representados en un lienzo de HTML5 como lo podemos hacer en Silverlight con Silverlight Spy?inspector de lienzo HTML5?
Si uso el inspector de elementos de Chrome puedo inspeccionar solo DOM.
EDIT: esta respuesta no funcionan en las nuevas versiones de cromo ver: chrome canvas inspector 2015
En Chrome Canary:
chrome://flags/la guía completa sobre el perfilador lienzo: http://www.html5rocks.com/en/tutorials/canvas/inspection/
gif animado mostrando en acción: https://twitter.com/umaar/status/480705624448045057
En mi versión de Chrome '24 .0.1312.56 m 'o Chrome Canary todavía no existe :(.. – mastak
instrucciones actualizadas. Es un proceso algo intrincado. – jedierikb
¿Hay alguna razón por la cual esto desaparecería milagrosamente? Lo tenía funcionando tanto en canario como en vainilla, un día poof. activado, sin perfilador, sin inspecciones de lienzo? – pailhead
El contenido de Canvas no forma parte del DOM, por lo que no hay forma de que pueda inspeccionar su contenido. Como ha señalado correctamente, los inspectores pueden inspeccionar solamente DOM, por lo que el lienzo está fuera de su alcance. Puede comprobar el contenido de la lona en la consola de su devtools aunque con
yourcanvas.toDataURL();
y comprobar la salida DataURL en la pestaña vecina.
Canvas es mapa de bits: su contenido es solo lo que ve en la pantalla –
No estoy seguro de cómo fue el último comentario, gracias @spliter - eso es genial para la depuración! – UpTheCreek
Tratar el lienzo como ms paint. No hay objetos, solo hay píxeles y métodos para ponerlos en pantalla.
No hay manera de inspeccionar el contenido de lona en el momento, pero en caso de WebGL puede utilizar "WebGL Inspector" extensión para Google Chrome, por lo que creo es posible para hacer extensión similar para lienzo demasiado . pero no funciona como los inspectores DOM comunes.
Aquí es las características de WebGL Inspector:
Vamos No estoy fuera de la carretera, pero no hay mapa de bits o vectorial lienzo inspector de en este momento.
No hay objetos representados en un lienzo HTML5. Solo hay pixeles Cuando dibujas una forma, el lienzo mueve su varita mágica, aparecen los píxeles, y luego se olvida de que algo pasó.
Como muchos lo han hecho, puede realizar un seguimiento de lo que dibuja en un lienzo para tener objetos persistentes para volver a dibujar. He escrito algunos popular tutorials on that y sin duda si busca, encontrará más.
A medida que crea su sistema de objetos persistentes, seguramente querrá incluir una gran cantidad de código de depuración que genera listas de objetos fáciles de entender y sus coordenadas. Mucha gente opta por hacer esto con declaraciones console.log que generarán las cadenas que desee para la consola de desarrollador (parte de las herramientas de desarrollador F12 en la mayoría de los navegadores modernos).
Pero eso es todo. Lo que construyes es lo que usas para inspeccionar las cosas.
Correcto ... no hay navegadores que admitan la inspección del lienzo todavía ... solo una forma de utilizar el marco correcto como [Kohana] (http://alertdevelop.ru/projects/profilertoolbar) – mastak
JavaScript no es HTML. Actualicé tu pregunta. – Jonas
La pestaña Perfil de Google Chrome en Herramientas del desarrollador (Ctrl + Shift + J) podría ser la solución. Aunque nunca lo intenté con lienzo. – Ryan
@minitech: la pestaña de perfiles le permite ver el uso de la CPU y el montón de JavaScript; realmente no tiene nada que ver con lo que se representa en la pantalla. – josh3736