html - HTML5 画布检查器？

Question

是否可以像在 Silverlight 中使用 Silverlight Spy 那样检查 HTML5 画布上呈现的对象？

如果我使用 Chrome 元素检查器，我只能检查 DOM。

score 47 · Accepted Answer

编辑： 此答案不适用于新的 chrome 版本，请参阅： chrome canvas inspector 2015

在 Chrome 金丝雀中：

score 20 · Accepted Answer

Canvas 的内容不是 DOM 的一部分，因此您无法检查它的内容。正如您正确指出的那样，检查员只能检查 DOM，因此画布超出了它的范围。您可以在开发工具的控制台中检查画布的内容，尽管使用

yourcanvas.toDataURL();

并检查相邻选项卡中的输出 dataURL。

score 11 · Accepted Answer

HTML5 Canvas 上没有呈现任何对象。只有像素。当你绘制一个形状时，画布挥动它的魔杖，像素出现，然后它甚至忘记了任何事情发生。

正如许多人所做的那样，您可以跟踪您在 Canvas 上绘制的内容，以便拥有用于重绘的持久对象。我已经写了 A Gentle Introduction to Making HTML5 Canvas Interactive，毫无疑问，如果你搜索你会发现其他教程。

在构建持久对象系统时，您几乎肯定会希望包含大量调试代码，这些代码输出易于理解的对象列表及其坐标。很多人选择使用console.log将输出您想要的任何字符串的语句来执行此操作（大多数现代浏览器中 F12 开发人员工具的一部分）。

但就是这样。你建造的是你用来检查事物的东西。

score 3 · Accepted Answer

目前无法检查画布内容，但如果是 WebGL，您可以使用Google Chrome 的“ WebGL Inspector ”扩展，所以我认为也可以为 Canvas 制作类似的扩展。但它不像普通的 DOM 检查器那样工作。

这是 WebGL 检查器的功能：

希望我不是越野，但目前没有位图或矢量画布检查器。

score 2 · Accepted Answer

2

将画布视为 ms 油漆。没有对象，只有像素和将它们放在屏幕上的方法。

于 2012-02-04T18:50:46.333 回答

5 回答 5