2

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

如果我单击第一个图块返回 0，如果单击第 10 个图块返回 9 并且 ... 和 ...

如何在 HTML5 画布上剪辑图块集？

4

1 回答 1

0

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

您可以称其为“命中测试”或“对象拾取”或“细胞检测”。

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

于 2012-05-12T23:32:37.947 回答