javascript - 查看画布元素源代码

Question

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

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

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

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

score 5 · Accepted Answer

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

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

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

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

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

在此处输入图像描述

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

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

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

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

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

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

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

score 2 · Accepted Answer

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

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

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

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

ctrl-u

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

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

2 回答 2