web-dev-qa-db-ja.com

HTML5キャンバスインスペクター？

SilverlightでSilverlight SpyのようにHTML5キャンバスにレンダリングされたオブジェクトを検査する機能はありますか？

Chrome要素インスペクタを使用すると、DOMのみを検査できます。

htmlcanvashtml5-canvasinspector
28
mastak

編集：この回答は新しいchromeバージョンを参照してください： （chrome canvas inspector 2015）

Chrome Canary：

  1. ブラウザで、次のURLを入力してくださいchrome://flags/
  2. 有効にするデベロッパーツールの実験を有効にする
  3. chromeを再起動します
  4. 開発者ツールで、「歯車」をクリックして開発者の設定を表示します
  5. メニューからexperimentsを選択します
  6. 選択キャンバス検査
  7. devtoolsを閉じ、ページを更新し、devtoolsを再度開きます

キャンバスプロファイラの完全なガイド： http://www.html5rocks.com/en/tutorials/canvas/inspection/

実際の動作を示すアニメーションGIF： https://Twitter.com/umaar/status/480705624448045057

45
jedierikb

CanvasのコンテンツはDOMの一部ではないため、コンテンツを検査する方法はありません。正しく指摘したように、インスペクタはDOMのみを検査できるため、キャンバスはそのスコープ外です。あなたはdevtoolsのコンソールでキャンバスの内容を確認することができます

yourcanvas.toDataURL();

隣のタブで出力dataURLを確認します。

12
spliter

HTML5 Canvasにレンダリングされたオブジェクトはありません。ピクセルのみです。形状を描くと、キャンバスはその杖を振って、ピクセルが表示されます。その後、何も起こらなかったことを忘れます。

多くの人が行っているように、再描画のための永続的なオブジェクトを持つために、キャンバスに何を描くかを追跡できます。私はいくつかの その上で人気のあるチュートリアル を書きました、そしてあなたが検索すればあなたはもっと見つけるでしょう。

永続オブジェクトのシステムを構築するとき、ほぼ確実に、オブジェクトとその座標のわかりやすいリストを出力する多くのデバッグコードを含める必要があります。多くの人がconsole.logステートメントは、開発者コンソール（最近のほとんどのブラウザーのF12開発者ツールの一部）に必要な文字列を出力します。

しかし、それだけです。ビルドするものは、物事を検査するために使用するものです。

7
Simon Sarris

現時点ではキャンバスコンテンツを検査する方法はありませんが、WebGLの場合は、Google Chromeの「 WebGL Inspector 」拡張機能を使用できるため、 Canvasにも同様の拡張機能を作成することは可能です。ただし、一般的なDOMインスペクターのようには機能しません。

WebGLインスペクターの機能は次のとおりです。

  • ページに挿入するための拡張機能
  • 単一のスクリプトを含む既存のアプリケーションに埋め込む
  • 全体をキャプチャGLフレーム
  • ステップ/リソースナビゲーションと冗長な呼び出し警告を含む注釈付きの呼び出しログ
  • ピクセル履歴-ピクセルに貢献したすべての描画呼び出しとブレンド情報を表示します
  • GL状態表示
  • テクスチャ、バッファ、プログラム用のリソースブラウザ

私がオフロードではないことを願いますが、現時点ではビットマップまたはベクターキャンバスインスペクターはありません。

3
sysop

キャンバスをms Paintとして扱います。オブジェクトはなく、ピクセルとそれらを画面に配置するためのメソッドのみがあります。

1
rezoner