查看canvas-element源代码

Question

有一个网站有一个整洁的画布程序，我想玩。我是canvas和html的新手，但我认为它的工作方式是将canvas元素单独编程并通过html中的标记调用。我有三个问题：

我可以下载并隔离canvas元素吗？

有没有办法从浏览器中查看画布来源？

如果需要反编译器，是否有适用于java脚本和其他元素的反编译器？

Answer 1

Canvas是一个HTML元素，通过编写程序性JavaScript来生成数字，动画，效果等，从而变得有用。

您可以通过在浏览器中打开开发人员工具（通常是F12）并浏览.js文件来查看源代码（即JavaScript）。

这是一个隔离页面，其中包含一个非常小的画布应用程序，您可以查看以下内容：

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

还有一个教程解释了从该页面链接到的所有源。

使用F12打开Goog​​le Chrome开发者工具，我们可以看到：

有一个名为shapes.js的JavaScript文件，它包含构成画布应用程序的所有代码。

---

完全隔离画布是另一个问题。让我们来看看纽约时报的这个页面：

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

如果你在这里打开开发人员工具，你会发现有大量的JavaScript在运行，其中很多都是混淆的，并且很难通过观察驱动构成其整洁图形的画布的代码来确定。

我们可以做点什么。我们可以转到Developer工具的“Elements”页面，然后在那里搜索相应的<canvas>标记。获得后，我们可以查看其属性，例如id（<canvas id="SearchForMe"></canvas>）。

然后在开发人员工具中，我们可以返回Scripts页面并按CTRL + SHIFT + F搜索文件，我们将能够搜索画布的ID或其他一些独特的标记。 （有时我们需要搜索保存画布的div）

还有另一种工具可以帮到这里。看看我的屏幕截图，最底部是一个看起来像{ }的按钮。这试图将混淆的代码转换为漂亮的打印，以提高人类的可读性。它通常可以帮助您解析您正在查看的代码。

无论如何，希望有所帮助。

Answer 2

要在Canvas上绘图，我们使用JavaScript。

  

我可以下载并隔离canvas元素吗？

不，您必须浏览页面的JavaScript代码并找出与canvas元素相关的内容。

  

有没有办法从浏览器中查看画布来源？

CTRL-U

  

如果需要反编译器，是否有适用于java脚本和其他元素的反编译器？

不，通常，您可以在查看源代码时直接阅读JavaScript。但有时，代码会缩小。最好再请作者分享原始代码。