HTML5帆布图像剪辑

Question

就像我在画布瓷砖图像。 http://i947.photobucket.com/albums/ad320/kev1030_photos/btiles2032.png

如何做这样的事情，如果我点击第一个瓷砖返回0，如果在10瓦的回报9和......然后......

如何在HTML5画布夹地形设置？

Answer 1

剪辑在这里不是正确的词。剪切是当你只画一部分图像或路径到屏幕上。

你会称之为“点击测试”或“对象选择”或“细胞检测”。

这只是简单的数学。每个图标是32 + 2黄色，这样你就可以做到这一点，找出哪些细胞：

can.addEventListener('mousedown', function(e) { 
    var mouse = getMouse(e, can); 
    var x = Math.floor(mouse.x/34); 
    var y = Math.floor(mouse.y/34); 
    alert(x + (y*16)); // because there are 16 in a row 
}, false); 

这里有一个工作示例：

http://jsfiddle.net/YH8b8/