使用JQuery在HTML5画布上单击特定的X-Y位置

Question

我想自动点击用html5画布制作的在线游戏。

在此在线游戏中，有2个画布彼此重叠：

bg-canvas：背景图片和静态组件。

fg-canvas：一些加载，按钮和其他指示物。

页面具有jQuery。 我使用google chrome devtool控制台注入我的代码。 首先，我为＃fg-convas注入一个监听器，并为＃bg-canvas注入另一个监听器：

$("#fg-canvas").on("click",function(e){
  console.log("fg-canvas clicked");
});

$("#bg-canvas").on("click",function(e){
  console.log("bg-canvas clicked");
});

在我单击画布后注入此代码后，我在控制台中看到fg-canvas clicked。

现在是我的问题：

此画布（fg-canvas）中有一个按钮，我想使用jquery代码单击它。我可以使用上层监听器获取按钮在画布中的位置，然后单击以下按钮：

var e = jQuery.Event( "click");
e.offsetX= ox-10; //ox is the x position i get with listener click
e.offsetY= oy-10; //oy is the y position i get with listener click
$('#fg-canvas').trigger(e);

运行此代码时，我可以看到侦听器显示fg-canvas clicked，但未单击按钮！

此后，我想也许我单击了错误的位置，然后更改了Click侦听器，以使用以下代码在该位置上画了一个圆：

$("#fg-canvas").on("click",function(e){
  console.log("fg-canvas clicked"); 
  var canvas = document.getElementById('bg-canvas');
  var context = canvas.getContext('2d');
  context.beginPath();
  context.arc(e.offsetX, e.offsetY, 50, 0, 2 * Math.PI);
  context.fillStyle = "green";
  context.fill();
  context.stroke();
});

使用此代码，单击时触发按钮上的绿色圆圈绘制，但未单击：（（

我所有的代码是

console.log("I AM HERE");
$("body").append('<button style="position:absolute;top:0;" id="test">test</button>');
var ox =0 , oy =0;
$("#fg-canvas").on("click",function(e){
  console.log("fg-canvas clicked");
  var canvas = document.getElementById('bg-canvas');
  var context = canvas.getContext('2d');
  context.beginPath();
  context.arc(e.offsetX, e.offsetY, 50, 0, 2 * Math.PI);
  context.fillStyle = "green";
  context.fill();
  context.stroke();
});


$("#test").on("click",function(){
  var e = jQuery.Event( "click");
  e.offsetX= ox-10;
  e.offsetY= oy-10;
  console.log(e);
  $('#fg-canvas').trigger(e);
});

html代码：

<div id="canvas-holder" style="height: 900px !important;">
  <canvas id="bg-canvas" width="1200" height="900" dir="rtl" style="z-index:0;width: 1200px; height: 900px;"></canvas>
  <canvas id="fg-canvas" width="1200" height="900" dir="rtl" style="z-index:1;width: 1200px; height: 900px;"></canvas>
</div>

Answer 1

您可以考虑动态地获取画布的宽度和高度，而不是使用 ox 变量，然后可以获取中心点，例如：

e.offsetX= $('#fg-canvas').width() / 2;
e.offsetY= $('#fg-canvas').height() / 2;

为了获得更多帮助，请添加一个html片段。

摘要：

$("body").append('<button style="position:absolute;top:0;" id="test">test</button>');
var ox =0 , oy =0;
$("#fg-canvas").on("click",function(e){
    var canvas = document.getElementById('bg-canvas');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.arc(e.offsetX, e.offsetY, 50, 0, 2 * Math.PI);
    context.fillStyle = "green";
    context.fill();
    context.stroke();
});


$("#test").on("click",function(){
    var e = jQuery.Event( "click");
    e.offsetX= $('#fg-canvas').width() / 2;
    e.offsetY= $('#fg-canvas').height() / 2;
    $('#fg-canvas').trigger(e);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="fg-canvas"></canvas>
<canvas id="bg-canvas"></canvas>