查看canvas-element源代码

Question

有一个网站有一个简洁的画布程序，我想使用它。我对 canvas 和 html 很陌生，但我认为它的工作原理是让 canvas 元素单独编程并由 html 中的标签调用。我有三个问题：

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

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

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

Answer 1

Canvas 是一种 HTML 元素，通过编写过程 JavaScript 来生成图形、动画、效果等，使其变得有用。

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

这是一个带有非常小的画布应用程序的独立页面，您可以查看其源代码：

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

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

在此输入图像描述

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

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

如果您在此处打开开发人员工具，您会发现正在运行大量 JavaScript，其中大部分都被混淆了，并且很难通过目视来确定哪些代码正在驱动构成整洁图形的画布。

不过我们可以做点什么。我们可以进入开发者工具的“元素”页面并在那里搜索适当的<canvas>标签。一旦我们有了它，我们就可以查看它的属性，例如 id ( <canvas id="SearchForMe"></canvas>)。

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

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

无论如何，希望有帮助。