javascript - キャンバス要素のソースコードを表示する

Question

私が遊んでみたいきちんとしたキャンバスプログラムのサイトがあります。キャンバスとhtmlは初めてですが、キャンバス要素を個別にプログラムし、htmlのタグで呼び出すことで機能すると思います。3 つの質問があります。

キャンバス要素をダウンロードして分離できますか?

ブラウザからキャンバスソースを表示する方法はありますか?

逆コンパイラが必要な場合、Java スクリプトやその他の要素でも機能するものはありますか?

score 5 · Accepted Answer

Canvas は、プロシージャルな JavaScript を記述して図、アニメーション、効果などを生成することで役立つ HTML 要素です。

ブラウザーで開発者ツール (通常は F12 キー) を開いて .js ファイルを調べると、ソースコード (つまり JavaScript) を表示できます。

以下は、ソースを表示できる非常に小さなキャンバスアプリケーションを含む分離されたページです。

そのページからリンクされているすべてのソースを説明するチュートリアルもあります。

F12 で Google Chrome デベロッパーツールを開くと、次のように表示されます。

ここに画像の説明を入力

shape.js という 1 つの JavaScript ファイルがあり、キャンバスアプリを構成するすべてのコードが含まれています。

キャンバスを分離することは、まったく別の問題です。New York Times のこのページを見てみましょう。

ここで開発者ツールを開くと、膨大な量の JavaScript が実行されており、その多くが難読化されており、きれいなグラフィックを構成するキャンバスを駆動しているコードを目で見て判断するのは非常に難しいことがわかります。

でも、できることはある。開発者ツールの「要素」ページに移動し、<canvas>そこで適切なタグを検索できます。取得したら、id ( <canvas id="SearchForMe"></canvas>) などのプロパティを確認できます。

次に、開発者ツールで [スクリプト] ページに戻り、CTRL+SHIFT+F を押してファイルを検索すると、キャンバスの ID またはその他の一意のマーカーを検索できます。(場合によっては、代わりにキャンバスを保持する div を検索する必要があります)

ここで役立つツールがもう 1 つあります。私のスクリーンショットを見てください。一番下にのようなボタンがあります{ }。これは、難読化されたコードをきれいな印刷物に変換して、人間の可読性を大幅に向上させようとします。多くの場合、見ているコードを解析するのに役立ちます。

とにかく、それが役立つことを願っています。

score 2 · Accepted Answer

Canvas に描画するには、JavaScript を使用します。

キャンバス要素をダウンロードして分離できますか?

いいえ、ページの JavaScript コードを調べて、canvas 要素に関連するものを把握する必要があります。

ブラウザからキャンバスソースを表示する方法はありますか?

ctrl-U

逆コンパイラが必要な場合、Java スクリプトやその他の要素でも機能するものはありますか?

いいえ、通常は、ソースを表示するときに JavaScript を直接読み取ることができます。ただし、コードが縮小されている場合もあります。その場合は、作成者に元のコードを共有するよう依頼することをお勧めします。

javascript - キャンバス要素のソース コードを表示する