点击HTML5画布

Question

我想用JavaScript/jQuery模拟点击画布进行测试，但我没有找到解决方法。这是我的代码：

var e = new jQuery.Event("click");
            e.pageX = X[index];
            e.pageY = Y[index];
            $("#gamecanvas").trigger(e);

这是否有可能实现？

例如这个游戏（我在网上随机搜索到的），我该如何通过JS\jQuery进行点击操作？

- ABC

Answer 1

这取决于画布上使用的事件，无论是“click”，“mousedown”等等。

在你刚提到的例子中，lucn事件使用了两个事件：

一个（“mousemove”）用于计算坐标以获取“clientX”和“clientY”。

第二个（“mousedown”）用于使用最后计算的坐标来发射球。

因此，你的代码应该像这样：

var mousemove = new jQuery.Event("mousemove");
mousemove.clientX = x;//passed valuue
mousemove.clientY =y;//passed valuue

var mousedown = new jQuery.Event("mousedown");

$("#canvas").trigger(mousemove);
$("#canvas").trigger(mousedown);

这里有一个 Plunker，我在其中创建了一个脚本，可以通过输入的坐标来发射球或直接将球扔进篮筐中 :)

请点击此处查看 实时Plunker 请点击此处查看 url 代码 Plunker 希望这能帮到您：

- Bourbia Brahim

Answer 2

这个例子可能会对你有所帮助

$('#canvas_element').on("mousedown mouseup", function(e) {
    $('#output').text($('#output').text() + (e.type + " event fired at coords: " + e.pageX + ", " + e.pageY));
});

    x_coord = 1;
    y_coord = 1;

    var e = jQuery.Event( "mousedown", { pageX: x_coord, pageY: y_coord } );
    $('#canvas_element').trigger(e);

    // execute more code

    var e = jQuery.Event( "mouseup", { pageX: 255, pageY: 255 } );
    $('#canvas_element').trigger(e);

工作链接

- Sridhar Rajan

---

例如这个游戏（我随机在网上搜索到的）http://corehtml5canvas.com/code-live/ch07/example-7.3/example.html 我怎样才能从JS\jQuery中进行点击？ - ABC

Answer 3

这是因为pageX和pageY无法获取画布的坐标，我自己在尝试创建签名板时也遇到了同样的问题。

请使用以下代码代替：

var e = new jQuery.Event("click");
           //for IE, safari, opera, chrome
           if(e.offsetX != null) {
            e.offsetX= X[index];
            e.offsetY= Y[index];
          }
          //for firefox
              if(e.layerX!= null) {
            e.layerX= X[index];
            e.layery= Y[index];
          }
            $("#gamecanvas").trigger(e);

- Barr J

Answer 4

不知道你的使用情况，但jQuery的文档告诉我是的： http://api.jquery.com/trigger/

为什么不自己通过非常详细的jQuery API文档进行搜索呢？

- Dasma

---

这不是关于jQuery的问题...而是关于使用JavaScript点击画布的方法。如果我使用屏幕坐标，它就无法工作。 - ABC

不妨回答一下：你为什么不去学习并回答自己的问题呢？我的意思是，这个平台并不是真正用于问答的，拜托了... - Philippe Fanaro