在没有 id 的情况下访问 Canvas 元素答案

【问题标题】：Access Canvas Elements without an id在没有 id 的情况下访问 Canvas 元素
【发布时间】：2016-02-26 23:13:54
【问题描述】：

小故事：如何使用 javascript 或 jquery 访问没有 id 的画布内的按钮？（如果有帮助，canvas 元素位于具有 id 的 div 内）。

长话短说：我在谷歌上到处搜索，但仍然找不到解决方案。画布检查器是否有扩展？我知道以前在 chrome 上有一个，但后来它被删除了。是恢复以前的 chrome 版本的唯一选择吗？我找不到任何其他允许画布检查的 github 扩展。

【问题讨论】：

画布中的按钮并不是真正的按钮——它是画在画布上的按钮图片。如果你只有一个大按钮填充画布，你可以在画布上设置一个 id 并订阅画布上的常见事件 - myCanvas.on('click',...) 等。如果你在一个画布上有多个按钮，那么你必须监听鼠标事件并单独点击测试每个按钮绘图。
但是假设我想弄清楚画布中的事件是什么，而我正在“检查”的画布甚至没有 id。
您可以使用document.querySelectorAll 要求 DOM 为您提供页面上所有画布元素的列表。所有画布元素都支持same basic events 作为其他元素。 同样，在画布上绘制的任何内容都只是绘制的像素，因此除了每个像素的 rgba 值之外，您无法“检查”画布上的任何内容。您可以使用以下方法获取画布的 rgba 像素数据数组：getImageData。

标签： canvas html5-canvas developer-tools web-inspector

【解决方案1】：

更新

首先，如果您的画布没有 id，那么您需要给它一个。不能给的话可以用Child Nodes

结束更新

更新 2

在 div 中选择画布的更好方法是使用 document.querySelector()，您可以在其中使用 CSS 选择器来获取画布，如下所示：document.querySelector("#divid canvas")。它返回第一个可能的元素。感谢 markE 向我展示了这一点

结束更新 2

如果可以在画布上设置一个事件监听器来获取鼠标的坐标，就可以查看是否点击了按钮。

我使用canvas.getBoundingClientRect() 来获取页面的偏移量，如果您需要滚动某处，这尤其有用。

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(10, 20, 100, 100);
canvas.addEventListener("click", buttonClick, false);
function buttonClick(e) {
  alert("You clicked the canvas");
  if (e.clientX - canvas.getBoundingClientRect().left >= 10 && e.clientX - canvas.getBoundingClientRect().left <= 110) {
    if (e.clientY - canvas.getBoundingClientRect().top >= 20 && e.clientY - canvas.getBoundingClientRect().top <= 120) {
      alert("You clicked the button");
      }
    }
  }

&lt;canvas id="mycanvas" width="250" height="250" style="border: 1px solid orange;"&gt;&lt;/canvas&gt;

【讨论】：

以下是如何在已知 ID 的 DIV 中获取未知画布：var canvas = document.querySelector("#knownDivID canvas") ;-)
对不起，不知道，更新答案