查看画布元素源代码 [英] View canvas-element source code

问题描述

有一个网站有一个整洁的画布程序，我想玩.我是画布和 html 的新手，但我认为它的工作原理是让画布元素单独编程并由 html 中的标签调用.我有三个问题:

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

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

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

解决方案

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

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

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

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

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

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

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

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

There is a site with a neat canvas program that I'd like to play with. I'm new to canvas and html, but I think it works by having the canvas element programmed separately and called by a tag in the html. I have three questions:

Can I download and isolate the canvas element?

Is there a way to view the canvas source from a browser?

If a decompiler is necessary, is there one that will work for java script and other elements too?

解决方案

Canvas is an HTML element that is made useful by writing procedural JavaScript to produce figures, animations, effects and so on.

You can view the source code - that is, the JavaScript - by opening developer tools in your browser (typically F12) and exploring the .js files.

Here's an isolated page with a very small canvas application that you can view the source for:

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

There is also a tutorial explaining all of the source that is linked to from that page.

Opening the Google Chrome devloper tools with F12 we can see:

There's one JavaScript file called shapes.js and it houses all of the code that makes up the canvas app.

---

Isolating a canvas is another problem entirely. Let's have a look at this page from the New York Times:

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

If you open developer tools here you'll realize that there is an enormous amount of JavaScript running, much of it obfuscated, and its very hard to determine by eyeballing just what code is driving the canvases that make up their neat graphic.

We can do something though. We can go to the "Elements" page of the Developer tools and search for the appropriate <canvas> tag there. Once we have it, we can look at its properties such as the id (<canvas id="SearchForMe"></canvas>).

Then in developer tools we can go back to the Scripts page and press CTRL+SHIFT+F to search across files, and we'll be able to search for the ID of the canvas or some other unique marker. (sometimes we need to search for the div that holds the canvas instead)

There's another tool that will help here. Look at my screenshot, at the very bottom is a button that looks like { }. This attempts to turn obfuscated code into pretty print for much greater human readability. It will often help you parse the code you're looking at.

Anyway, hope that helps.

这篇关于查看画布元素源代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！