逻辑
如果不为其提供自定义逻辑，您将无法在画布上处理单独的字母。绘制到画布上的所有内容都合并为像素汤。
不幸的是，您不能将文本添加为纯路径，因此您必须检查像素值。否则，您可以简单地将文本添加到新路径并为每个字母使用 isPointInPath 方法。
一种方法
我们无法在 SO 上提供完整的解决方案，但希望您可以在此基础上构建一个基础，以提供单击画布上单个字母的基本逻辑：
- 每个字母都存储为对象，包括。它的位置、大小、字体和字符，还带有一个矩形点击区域（见下文）
- 用这些对象定义一个数组，然后将它们传递给渲染函数
- 当您注册单击时，遍历数组并针对矩形命中区域进行测试，如果在内部检查像素 (*)
*) 要区分重叠的字母，您需要按优先级进行检查。您还可以将此字符渲染到单独的画布上，以便仅获取此字符的像素。我没有在演示中展示这个，但你会明白的。
演示
var ltrs = []; /// stores the letter objects
/// Create some random objects
for(;i < 20; i++) {
/// build the object
var o = {char: alpha[((alpha.length - 1) * Math.random())|0],
x: ((w - 20) * Math.random())|0,
y: ((h - 20) * Math.random())|0,
size: (50 * Math.random() + 16)|0,
font: fonts[((fonts.length - 1) * Math.random())|0]};
/// store other things such as color etc.
/// store it in array
ltrs.push(o);
}
然后我们有一些函数来渲染这些字符（参见演示）。
当我们随后处理点击时，我们遍历对象数组并首先检查边界以检查我们所在的字母（此处仅选取一个像素不会使我们能够识别字母）：
demo.onclick = function(e) {
/// adjust mouse position to be relative to canvas
var rect = demo.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top,
i = 0, o;
/// iterate
for(;o = ltrs[i]; i++) {
/// is in rectangle? "Older" letters has higher priority here...
if (x > o.x && x < (o.x + o.rect[2]) &&
y > o.y && y < (o.y + o.rect[3])) {
/// it is, check if we actually clicked a letter
/// This is what you would adopt to be on a separate canvas...
if (checkPixel(x, y) === true) {
setLetterObject(o, '#f00')
return;
}
}
}
}
像素检查很简单，它在 x/y 位置选择一个像素并检查其 alpha 值（如果使用纯色背景，则检查颜色）：
function checkPixel(x, y) {
var data = ctx.getImageData(x, y, 1, 1).data;
return (data[3] !== 0);
}
CLICK HERE FOR ONLINE DEMO
更新检查像素功能：
这种更新的检查能够检查字母，即使它们在同一区域内重叠。
我们创建一个单独的画布来绘制字母。这将隔离字母，当我们选择一个像素时，我们只能从该特定字母中获取一个像素。背景颜色是什么也无关紧要，因为我们的屏幕外画布仅在检查期间为字母设置像素而不是背景。开销很小。
function checkPixel(o, x, y) {
/// create off-screen canvas
var oc = document.createElement('canvas'),
octx = oc.getContext('2d'),
data,
oldX = o.x,
oldY = o.y;
/// default canvas is 300x150, adjust if letter size is larger *)
//oc.width = oc.height = 200;
/// this can be refactored to something better but for demo...
o.x = 0;
o.y = 0;
setLetterObject(octx, o, '#000');
o.x = oldX;
o.y = oldY;
data = octx.getImageData(x - oldX, y - oldY, 1, 1).data;
return (data[3] !== 0);
}
*) 当我们创建一个画布时，默认大小是 300x150。为避免重新分配新的位图，我们只需将其保持原样，因为内存已为其分配，我们只需要从中选择一个像素。如果字母的像素大小大于默认大小，我们当然需要重新分配以使字母适合。
在此演示中，我们临时覆盖 x 和 y 位置。对于生产，您应该启用 setLetterObject 方法以某种方式覆盖它，因为这样会更优雅。但我将在演示中保持原样，因为最重要的是理解原理。