Блог

У меня есть элемент canvas, и когда страница загружается, изображение и некоторые фигуры отображаются на холсте. При нажатии на изображение я хочу запустить функцию. Я впервые попробовал это.

 const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);

btn.onmousedown = function () {
  // do stuff
}
 

Это не сработало. Я также не получил никаких ошибок в консоли. Затем я попытался использовать addEventListener функцию.

 const btn = ctx.drawImage(btnImg, 0, 0, 150, 100);

btn.addEventListener("click", function (event) {
  // do stuff
}, false);
 

И снова это не сработало. Возможно ли это без использования свойства CSS z-index для перемещения кнопки над холстом?

То, что вы хотите сделать, невозможно — по крайней мере, не таким образом. Проблема в том, что холст на самом деле не знает о форме объектов, на которых вы рисуете. Он просто знает об отдельном цвете пикселя.

Однако вы можете сохранить ограничительную рамку — положение и размеры экрана — ваших кнопок в виде прямоугольника Path2D и использовать context.isPointInPath(path2d,x,y) функцию, чтобы проверить, нажал ли кто-нибудь внутри области, занятой кнопкой на вашем холсте.

Вот пример (просто нажмите «Выполнить фрагмент кода»):

 var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
var buttons = [];

function draw(e) {
  let x, y, width, height, path;

  // first button
  x = 20;
  y = 20;
  width = 100;
  height = 20;
  context.drawImage(e.target, x, y, width, height);
  path = new Path2D();
  path.rect(x, y, width, height);
  buttons.push(path);

  // second button
  x = 150;
  y = 20;
  width = 100;
  height = 20;
  context.drawImage(e.target, x, y, width, height);
  path = new Path2D();
  path.rect(x, y, width, height);
  buttons.push(path);
}

function canvasClicked(e) {
  let button;
  for (var a = 0; a < buttons.length; a  ) {
    button = buttons[a];
    if (context.isPointInPath(button, e.offsetX, e.offsetY)) {
      console.log("button "   (a   1)   " clicked");
    }
  }
}

image.onload = draw;
image.src = "https://picsum.photos/id/866/200/300";
canvas.addEventListener("click", canvasClicked); 

 <canvas id="canvas" style="background-color:grey;"></canvas>