HTML5画布图像剪辑

Question

像画布瓷砖图像中的东西。 http://i947.photobucket.com/albums/ad320/kev1030_photos/btiles2032.png

如果我点击第一个瓷砖返回0，如果在10个瓷砖上返回9并且......并且... ...

如何在HTML5画布上剪辑tileset？

Answer 1

Clip在这里不是正确的词。剪切是指您只将部分图像或路径绘制到屏幕上。

你会称之为“命中测试”或“物体拣选”或“细胞检测”。

这只是简单的数学运算。每个图标都是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/