如何使用 Javascript 访问奇怪 Canvas 中的元素？答案

【问题标题】：How to access elements in strange Canvas with Javascript?如何使用 Javascript 访问奇怪 Canvas 中的元素？
【发布时间】：2018-10-30 02:34:47
【问题描述】：

我对 javascript 很陌生，我一直在研究一个简单的用户脚本，它可以点击网页上的按钮（我无法控制。）我在获取和点击按钮或 div 时没有问题，但是，我需要单击一个按钮，该按钮仅在单击第一个按钮后出现。当我检查这个元素时，它给我的只是一个围绕按钮的空画布。我已经浏览了整个源代码，但在任何地方都找不到这些按钮！如何使用 JavaScript 访问它们？这是 Agar.io 中这样一个框和按钮的示例（嘿，这是我能找到的第一个地方！）

这是弹出窗口： Three button Popup

这是与检查元素相关的代码：

<div data-v-9c4d2b0c="" id="openfl-content" style="transform: translate(0%, -50%) scale(0.895); cursor: default;"><canvas style="transform: translateZ(0px); width: 880px; height: 1024px; margin-left: 0px; margin-top: 0px;" width="880" height="1024"></canvas></div>

请有人帮我找到我的按钮！

【问题讨论】：

这可能会变得复杂。您需要链接到目标页面或提供minimal reproducible example。但一般来说，您通常必须 (1) 识别 真正的 点击目标（通常是覆盖的 div 或第二个画布），以及 (2) 在点击中发送适当的 X、Y 信息。
就在link的主页上，左中角有一个“免费硬币”按钮，它会拉出一个对话框，就像画布上的东西一样。似乎所有打开对话框的按钮都在此画布中打开它。（或在它下面）

标签： javascript html canvas userscripts

【解决方案1】：

这是我需要单击的一个按钮，该按钮仅在单击第一个按钮后出现

关于延迟按钮出现 - 您可以在 setInverval() 循环中搜索最终按钮：

喜欢这个

const interval = setInterval(function(){
    var $wrapper = $('.buttonWrapperOrAnythingThatContainsYourButton');
    if ($wrapper.length > 0) {
        var $btn = $wrapper.find('[that-buttons-special-attribute]');
        if ($btn.length > 0){
            $btn.trigger('click'); // or something (if your button is a clickable DOM element), if not - see the comment blow
            clearInterval(interval);
        }
    }
}, 500);

这种方法非常简单，只适用于可点击的 DOM 元素。如果您的按钮隐藏在 Canvas 内的某处 - 您将有更复杂的“点击”模拟，请参阅此答案以了解如何在确切位置点击 Canvas： simulate a mouse down and up on a canvas html5 page

【讨论】：

谢谢！但是我如何找出放什么而不是'.quirkyButton'？按钮可能没有 id。
所以您正在寻找/等待的最后一个按钮 - 不是 DOM 元素吗？这个想法是等待一些可靠的元素或包装器（当您的按钮 100% 出现在 DOM 中时），然后在其中搜索您的按钮（通过某些属性或索引）
好吧，这更有意义。 Canvas 可以用作包装器吗？
我已经更新了答案，添加了“点击画布”的链接，希望对您有所帮助