javascript - 查看 Canvas 元素源代码

有一个网站有一个简洁的 Canvas 程序，我想玩一下。我是 canvas 和 html 的新手，但我认为它的工作原理是将 canvas 元素单独编程并由 html 中的标记调用。我有三个问题:

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

有没有办法从浏览器查看 Canvas 源？

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

最佳答案

Canvas 是一种 HTML 元素，通过编写程序化 JavaScript 来生成图形、动画、效果等，从而变得非常有用。

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

这是一个独立的页面，其中包含一个非常小的 Canvas 应用程序，您可以查看其源代码:

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

用F12打开Google Chrome开发者工具我们可以看到:

enter image description here

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

隔离 Canvas 完全是另一个问题。让我们看看纽约时报的这一页:

如果您在这里打开开发人员工具，您会发现有大量的 JavaScript 正在运行，其中大部分都被混淆了，并且很难通过目测来确定究竟是什么代码在驱动构成其整洁图形的 Canvas 。

不过我们可以做点什么。我们可以到Developer tools的“Elements”页面，搜索合适的<canvas>在那里标记。一旦我们有了它，我们就可以查看它的属性，例如 id ( <canvas id="SearchForMe"></canvas> )。

然后在开发人员工具中，我们可以返回到“脚本”页面并按 CTRL+SHIFT+F 跨文件搜索，我们将能够搜索 Canvas 的 ID 或其他一些唯一标记。 (有时我们需要搜索存放 Canvas 的 div)

这里还有另一个工具可以提供帮助。看我的截图，在最底部是一个看起来像{ }的按钮。 .这试图将混淆的代码变成 pretty-print ，以提高人类的可读性。它通常会帮助您解析正在查看的代码。

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

关于javascript - 查看 Canvas 元素源代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11134714/