查看畫布元素源代碼

Question

有一個網站有一個整潔的畫布程序，我想玩。我不熟悉canvas和html，但我認爲它的工作方式是將canvas元素單獨編程，並通過html中的標記進行調用。我有三個問題：

我可以下載並隔離畫布元素嗎？

有沒有辦法從瀏覽器查看畫布源代碼？

如果需要反編譯器，是否有一個可以用於java腳本和其他元素？

Answer 1

Canvas是一個HTML元素，通過編寫過程化JavaScript來生成圖形，動畫，效果等等，這些HTML元素非常有用。

通過在瀏覽器中打開開發人員工具（通常爲F12）並瀏覽.js文件，您可以查看源代碼 - 即JavaScript。

下面是一個孤立的頁面，一個非常小的畫布應用程序，您可以查看源：

http://simonsarris.com/project/canvasdemo/shapes.html

還有一個教程解釋所有鏈接到該網頁上源。

打開谷歌瀏覽器devloper工具，F12，我們可以看到：

有一個JavaScript文件shapes.js和它安置所有拼成的畫布應用程序的代碼。

---

分離畫布完全是另一個問題。讓我們來看看這個頁面從紐約時報：

http://www.nytimes.com/interactive/2012/06/11/sports/basketball/nba-shot-analysis.html

如果開放的開發工具在這裏，你會意識到，存在的JavaScript運行大量的，大部分是模糊的，其很很難通過目測確定哪些代碼正在驅動構成其整齊圖形的畫布。

雖然我們可以做點事情。我們可以轉到開發人員工具的「元素」頁面，並在那裏搜索適當的<canvas>標籤。一旦我們有了它，我們可以看看它的屬性，如id（<canvas id="SearchForMe"></canvas>）。

然後在開發人員工具中，我們可以返回到腳本頁面，然後按CTRL + SHIFT + F搜索文件，我們將能夠搜索畫布的ID或其他獨特標記。 （有時我們需要搜索保存畫布的div）

還有另一個工具可以幫助您。看看我的屏幕截圖，最底部是一個看起來像{ }的按鈕。這會嘗試將混淆的代碼轉換爲漂亮的打印文件，以提高人的可讀性。它通常會幫助你解析你正在看的代碼。

無論如何，希望有所幫助。

Answer 2

要在畫布上畫畫，我們使用JavaScript。

我可以下載並隔離canvas元素嗎？

不，您必須通過頁面的JavaScript代碼並找出與canvas元素相關的內容。

有沒有辦法從瀏覽器查看畫布源代碼？

CTRL-U

如果反編譯器是必要的，是有一個將用於Java腳本和其他元素也工作？

不，通常，您可以在查看源文件時直接閱讀JavaScript。但有時候，代碼會被縮小。最好是讓作者分享原始代碼。