检测点击了哪个 canvas 矩形

Question

我在 html 中有一个 canvas:

<canvas id="canvas" width="450" height="450"></canvas>

我在其中制作了九个大小相同的方块。我想看看我点击了哪个方块作为警报功能。我该怎么做？

完整代码在这里：https://jsfiddle.net/ckd6g1ac/1/

抱歉，我在 JSFiddle 中没有任何与我的问题相关的代码，但我不知道如何开始编写它。

谢谢！

Answer 1

这是您的 onclick 功能：

$("#canvas").click(function(e) {
  var yNames = ['upper', 'middle', 'lower'],
    xNames = ['left', 'middle', 'right'];
  alert(('The '
    + yNames[Math.floor((e.offsetY * 3) / canvas.height)] + '-'
    + xNames[Math.floor((e.offsetX * 3) / canvas.width)] + ' box was clicked.')
      .replace('middle-middle', 'middle'));
});

您的循环中还有一个语义错误：它应该是 i<9 而不是 1<9。

使用

offsetX 和 offsetY 是因为它们测量元素本身的偏移量，这意味着 canvas 在页面上的位置并不重要。

Working JSFiddle.

检测点击了哪个 canvas 矩形

Detect which canvas rectangle is clicked

html

javascript

jquery

html5-canvas