使用 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 但未单击按钮！

在此之后，我想也许我点击了错误的位置，然后我改变了点击监听器，用这段代码在那个位置画了一个圆圈：

$("#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片段。

sn-p：

$("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>