访问没有ID的画布元素

短故事：如何访问没有id或jquery id的画布内的按钮？（如果有帮助的话，canvas元素在一个div中有一个id）。访问没有ID的画布元素

长篇故事：我在谷歌搜索到处都找不到解决方案。是否有画布检查员的扩展？我知道之前在Chrome上有一个，但之后就被删除了。是恢复以前的chrome版本的唯一选择吗？我找不到任何其他允许画布检查的github扩展。

2016-02-26 Michael Chen

画布里面的按钮是不是一个真正的按钮 - 这是画布上的按钮的图片。如果你只有一个大按钮填充画布，你可以在画布上设置一个id并订阅画布上的常见事件 - “myCanvas.on（'click'，...）'等等。如果你有多个按钮一个画布，然后你必须听取鼠标事件，并单独按键测试每个按钮的绘图。 – markE

但是说我想弄清楚画布中的事件，我正在'检查'的画布甚至没有ID。 –

您可以让DOM使用'document.querySelectorAll'为页面提供页面上所有画布元素的列表。所有画布元素都支持[相同的基本事件]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement）作为其他元素。 **同样，画布上绘制的任何东西都只是绘制像素**，所以除了每个像素的RGB值之外，您无法“检查”画布上的任何内容。您可以使用'getImageData'获取画布的rgba像素数据的数组。 – markE

UPDATE

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

结束时更新

更新2

一种更好的方式来选择一个div内的画布是通过使用document.querySelector()中，你可以使用一个CSS选择器来获得这样的画布：document.querySelector("#divid canvas")。它返回第一个可能的元素。感谢您对坊间显示我

结束时更新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>

来源

2016-02-27 13:48:48 zevee

以下是如何使用已知ID抓取DIV内未知画布的方法：var canvas = document.querySelector（“＃knownDivID canvas”）';-) – markE

对不起，不知道，更新回答 – zevee

访问没有ID的画布元素

回答

相关问题