检测哪个帆布矩形点击

-1

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

那我提出的9个大小相等的正方形我想看看我点击了作为警告功能什么平方米。我会怎么做？

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

对不起，我没有相关的我在的jsfiddle问题的任何代码，但我对如何开始写它没有任何线索。

谢谢！

来源

2015-08-23 Harshul Sahni

http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element - 这应该有帮助...所以，一些数学... :) – sinisake

该死的，被标记为重复。我仍然可以分享这个工作小提琴：https://jsfiddle.net/ckd6g1ac/8/ – Xufox

@Xufox非常感谢很多人，你是唯一一个提供了这个问题的答案。 –

这是您的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。

来源

2015-08-23 16:50:29 Xufox

检测哪个帆布矩形点击

回答

相关问题