HTML5-Canvas-Inspektor?

Gibt es keine Möglichkeit zu prüfen der Objekte, die gerendert auf einem HTML5-canvas, wie wir es in Silverlight mit Silverlight Spy ?

Wenn ich mit Chrome Elemente-Inspektor kann ich überprüfen nur DOM.

InformationsquelleAutor der Frage mastak | 2012-02-04

  1. 43

    EDIT:
    diese Antwort nicht auf neue Versionen von chrome finden Sie unter:
    chrome Leinwand Inspektor 2015

    In Chrome Canary:

    1. in Ihrem browser, geben Sie diese url ein chrome://flags/
    2. aktivieren Aktivieren Entwickler-Tools Experimente
    3. relaunch Chrome
    4. in der Entwickler-tools, klicken Sie auf den 'Gang' zu bringen, bis Entwickler Vorlieben
    5. wählen Sie Experimente aus dem Menü
    6. wählen Sie Leinwand Inspektionen
    7. schließen devtools, aktualisieren Sie die Seite, öffnen Sie " devtools

    Die ausführliche Anleitung auf der Leinwand profiler:
    http://www.html5rocks.com/en/tutorials/canvas/inspection/

    Animierte gif zeigt es in Aktion:
    https://twitter.com/umaar/status/480705624448045057

    InformationsquelleAutor der Antwort jedierikb

  2. 10

    Leinwand " Inhalt ist nicht Teil des DOM, so dort ist keine Weise, die Sie könnte prüfen Sie den Inhalt. Wie haben Sie richtig spitz sind, können die Inspektoren inspizieren DOM nur, damit die Leinwand ist aus dem Rahmen. Sie können den Inhalt von der Leinwand in die Konsole Ihrer devtools obwohl mit

    yourcanvas.toDataURL();

    und überprüfen Sie die Ausgabe dataURL in der benachbarten tab.

    InformationsquelleAutor der Antwort spliter

  3. 7

    Gibt es keine Objekte gerendert auf einem HTML5-Canvas. Es sind nur Pixel. Wenn Sie beim zeichnen einer Form die Leinwand Wellen seinen Zauberstab die Pixel angezeigt werden, und dann vergisst, dass auch nur irgendetwas passiert ist.

    Als viele das getan haben, können Sie verfolgen, was Sie zeichnen auf eine Leinwand, um persistente Objekte, die für das Neuzeichnen. Ich habe geschrieben ein paar beliebte tutorials auf, dass und kein Zweifel, wenn Sie suchen, finden Sie mehr.

    Als Sie bauen Ihr system von persistenten Objekten, die Sie sicherlich wollen, um eine Menge debug-code, die Ausgaben einfach zu verstehen Listen der Objekte und deren Koordinaten. Viele Menschen wählen, dies zu tun mit console.log Aussagen, dass ausgegeben wird, was Zeichenfolgen, die Sie möchten, um die Entwickler-Konsole (Teil der F12 developer-tools in den meisten modernen Browsern).

    Aber das ist es. Was Sie bauen, ist was Sie erhalten, zu verwenden, um zu überprüfen, Dinge.

    InformationsquelleAutor der Antwort Simon Sarris

  4. 3

    Gibt es keine Möglichkeit zu prüfen, den canvas-Inhalt im momentAber im Falle von WebGL, die Sie verwenden können, " WebGL-Inspektor " - Erweiterung für Google Chrome, so denke ich, dass ist es möglich ähnliche Erweiterung für die Leinwand zu. aber es funktioniert nicht wie gewöhnliche DOM-Inspektoren.

    Hier ist die WebGL-Inspektor bietet:

    • Erweiterung für die Injektion in die Seiten
    • Einbetten in eine vorhandene Anwendung mit einem einzigen Skript enthalten
    • Capture gesamte GL-frames
    • Kommentierte Anruf-log mit stepping/resource navigation und redundante call Warnungen
    • Pixel-Geschichte - sehen Sie alle draw-Aufrufe, die dazu beigetragen pixel + mischen Informationen
    • GL Zustand display
    • Ressource Browser für Texturen, Puffer, und Programme

    Let ' s hoffe ich bin nicht off-road, aber dort ist keine Bitmap-oder Vektor-Leinwand Inspektor im moment.

    InformationsquelleAutor der Antwort sysop

  5. 1

    Behandeln Leinwand als ms paint. Es gibt keine Objekte, es sind nur Pixel und Methoden, um Sie auf dem Bildschirm.

    InformationsquelleAutor der Antwort rezoner

Schreibe einen Kommentar