Question

我在html中有一个画布：

<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，因为它们会测量元素本身的偏移量，这意味着画布在页面上的位置无关紧要。

Working JSFiddle

检测单击哪个画布矩形

1 个答案: