HTML5 画布图像剪辑答案

【问题标题】：HTML5 Canvas Image ClippingHTML5 画布图像剪辑
【发布时间】：2023-03-03 19:07:01
【问题描述】：

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

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

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

【问题讨论】：

剪辑与它有什么关系？看来您想知道如何计算给定画布上的坐标的“框号”？
我需要做这样的事情 - youtube.com/watch?v=ayDycuPPd60
这不是这个地方的工作方式 - 将您的问题减少到 defined、bite size 块，您可能会得到一些帮助。同时让人们知道您已经尝试过什么。
伙计们让他休息一下，我不认为他的母语是英语，如果你没有足够的词汇量，很难很好地定义一个问题。

标签： javascript html canvas

【解决方案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/

【讨论】：