使用javascript在画布上创建多个按钮

Question

我想用javascript画布制作一个简单的文字游戏。

我有一个看起来像这样的网址：

127.0.0.1:8000/join?scrambled_word=elolh&possible_words=hello&time=60

我需要在scrambled_word，e，l，o，l，h中显示每个字母作为按钮，并且能够在每次点击其中一个时检测到。

我尝试将scrambled单词作为char数组并循环并显示它：

for (var i = 0; i < game.scrambleArr.length; i++) {
     ctx.font = "bold 20px verdana, sans-serif ";
     ctx.fillStyle = "#fff";
     //game.scrambleArr is just an array that contains the scrambled word from the url.
     ctx.fillText(game.scrambleArr[i], game.letterX, game.letterY);
     game.letterX += 40;
}

这个问题是，这使得每次点击一封信都很难检测到。

如何显示这些字母并使其可点击？

Answer 1

如果你知道文本的起始位置，它的高度和字母之间的距离，你可以将click事件绑定到canvas，然后使用clientX的clientY和mouse event属性检测点击的字母，并将它们与字母位置进行比较：

let game = {
  scrambleArr: ['e', 'l', 'o', 'l', 'h'],
  letterX: 20,
  letterY: 40
}

let canvas = document.getElementById('c');
let ctx = canvas.getContext("2d");

let x = game.letterX;

for (let i = 0; i < game.scrambleArr.length; i++) {
     ctx.font = "bold 20px verdana, sans-serif ";
     ctx.fillStyle = "#fff";
     ctx.fillText(game.scrambleArr[i], x, game.letterY);
     x += 40;
}

canvas.addEventListener('click', function(e) {
  var rect = canvas.getBoundingClientRect();
  let x = e.clientX - rect.left, y = e.clientY - rect.top;   
  if (y > game.letterY - 20 && y < game.letterY) {
    for (let i = 0; i < game.scrambleArr.length; i++) {
      let lx = game.letterX + i * 40;
      if (x > lx && x < lx + 40) {
        // we got the hit
        console.log(game.scrambleArr[i]);
      }
    }
  }
});

canvas {
  background: lightgrey;
}
.as-console-wrapper { max-height: 5.3em !important; }

<canvas id=c width=220 height=60></canvas>

Answer 2

你需要的是学习主题“命中检测”，因为canvas是DOM的“原子”元素。

如果只回答几行，这还不够。

这是一个教程：https://blog.lavrton.com/hit-region-detection-for-html5-canvas-and-how-to-listen-to-click-events-on-canvas-shapes-815034d7e9f8