如何使用Javascript访问奇怪的Canvas中的元素?

时间:2018-10-30 02:34:47

标签: javascript html canvas userscripts

我对javascript很陌生,并且我一直在研究一个简单的用户脚本,该脚本单击网页上的按钮(我无法控制。)我没有任何问题,可以使用监听器来获取并单击按钮或div,但是,我需要单击一个按钮,该按钮仅在单击第一个按钮之后出现。当我检查此元素时,所有给我的是围绕按钮的空画布。我遍历了整个源代码,无法在任何地方找到这些按钮!如何使用JavaScript访问它们? 这是Agar.io中这样一个框和按钮的示例(嘿,这是我可以找到的第一个地方!)

这是弹出窗口: Three button Popup

这是与inspect元素关联的代码:

<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>

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

1 个答案:

答案 0 :(得分: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元素。如果您的按钮隐藏在“画布”内部某处-您将进行更复杂的“单击”模拟,请参考此答案以了解如何在确切位置单击“画布”: simulate a mouse down and up on a canvas html5 page