используя JQuery для щелчка в определенной позиции X-Y на холсте HTML5

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;

InЧтобы получить дополнительную помощь, добавьте фрагмент 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>