Question

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

长篇故事：我在谷歌的各个地方搜索，但仍然无法找到解决方案。画布检查员是否有扩展名？我知道之前有一个镀铬，但后来它被删除了。是恢复以前的chrome版本的唯一选择吗？我找不到允许画布检查的任何其他github扩展。

Answer 1

<强>更新

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

END UPDATE

更新2

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

END UPDATE 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");
      }
    }
  }

<canvas id="mycanvas" width="250" height="250" style="border: 1px solid orange;"></canvas>

访问没有id的Canvas元素

1 个答案: