檢測哪個帆布矩形點擊

-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

檢測哪個帆布矩形點擊

回答

相關問題