attribute - ¿Inspector de lienzo HTML5?

title html css

Question

¿Hay alguna posibilidad de inspeccionar los objetos presentados en un lienzo de HTML5 como lo podemos hacer en Silverlight con Silverlight Spy?

Si uso el inspector de elementos de Chrome, puedo inspeccionar solo DOM.

Answer 1

El contenido de Canvas no es 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. Sin embargo, puede verificar el contenido del lienzo en la consola de sus devtools con

yourcanvas.toDataURL();

y verifique la URL de datos de salida en la pestaña contigua.

Answer 2

No hay forma de inspeccionar el contenido del canvas en este momento , pero en el caso de WebGL puede usar la extensión " WebGL Inspector " para Google Chrome, por lo que creo que también es posible hacer una extensión similar para Canvas. pero no funciona como los inspectores DOM comunes.

Aquí están las características de WebGL Inspector:

• Extensión para inyectar en páginas
• Incrustar en una aplicación existente con un solo script incluye
• Capture marcos completos de GL
• Registro de llamadas anotadas con navegación por pasos / recursos y advertencias de llamadas redundantes
• Historial de píxeles: consulte todas las llamadas al sorteo que contribuyeron a una información de mezcla de píxeles +
• Pantalla de estado GL
• Buscadores de recursos para texturas, búferes y programas

Esperemos no estar fuera de la carretera, pero no hay inspector de mapa de bits o Vector Canvas en este momento.

Answer 3

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 hacer un seguimiento de lo que dibuja en un lienzo para tener objetos persistentes para volver a dibujar. He escrito algunos tutoriales populares sobre eso y, sin duda, si buscas, encontrarás 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 elige hacer esto con las instrucciones de console.log que generarán las cadenas que desee para la consola de desarrollador (parte de las herramientas de desarrollador de F12 en la mayoría de los navegadores modernos).

Pero eso es todo. Lo que construyes es lo que usas para inspeccionar las cosas.

Answer 4

Trata el lienzo como ms paint. No hay objetos, solo hay píxeles y métodos para ponerlos en pantalla.

Answer 5

EDIT: esta respuesta no funciona en las nuevas versiones de Chrome ver: chrome canvas inspector 2015

En Chrome Canary:

1. en su navegador, ingrese este url chrome://flags/
2. Habilitar Habilitar experimentos de Developer Tools
3. relanzar Chrome
4. en las herramientas de desarrollador, haga clic en ''engranaje'' para mostrar las preferencias del desarrollador
5. seleccione experimentos del menú
6. seleccione Inspecciones de lienzo
7. cerrar devtools, actualizar la página, volver a abrir devtools

La guía completa en el perfilador de lienzo: http://www.html5rocks.com/en/tutorials/canvas/inspection/

Gif animado que lo muestra en acción: https://twitter.com/umaar/status/480705624448045057