Saltar al contenido

Inspector de lienzo HTML5?

Solución:

EDITAR:
esta respuesta no funciona en las nuevas versiones de Chrome, consulte: Chrome Canvas Inspector 2015

En Chrome Canary:

  1. en su navegador, ingrese esta url chrome://flags/
  2. habilitar Habilitar experimentos de herramientas para desarrolladores
  3. relanzar Chrome
  4. en las herramientas para desarrolladores, haga clic en el gear para mostrar las preferencias del desarrollador
  5. Seleccione experimentos del menú
  6. Seleccione Inspecciones de lona
  7. cerrar devtools, actualizar la página, volver a abrir devtools

La guía completa sobre 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

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 solo pueden inspeccionar DOM, por lo tanto, el lienzo está fuera de su alcance. Puede verificar el contenido del lienzo en la consola de sus devtools aunque con

yourcanvas.toDataURL();

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

No hay objetos representados en un lienzo HTML5. Solo hay píxeles. Cuando dibuja una forma, el lienzo agita su varita, aparecen píxeles y luego se olvida de que incluso sucedió algo.

Como muchos han hecho, puede realizar un seguimiento de lo que dibuja en un lienzo para tener objetos persistentes para volver a dibujar. He escrito Una introducción suave para hacer que HTML5 Canvas sea interactivo y, sin duda, si busca, encontrará otros tutoriales.

A medida que construye su sistema de objetos persistentes, seguramente querrá incluir mucho código de depuración que genere listas de objetos fáciles de entender y sus coordenadas. Mucha gente elige hacer esto con console.log declaraciones que generarán las cadenas que desee en la consola del desarrollador (parte de las herramientas de desarrollo F12 en la mayoría de los navegadores modernos).

Pero eso es todo. Lo que construyes es lo que puedes usar para inspeccionar cosas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *