好的，我已经找到问题的根源了。原文在这里：
http://jsfiddle.net/CVFv5/4/ http://jsfiddle.net/CVFv5/4/
固定版本在这里：
http://jsfiddle.net/CVFv5/3/ http://jsfiddle.net/CVFv5/3/
基本上，问题是您没有正确计算 X 和 Y 变量。.offsetX and .offsetY计算相对于元素的直接祖先（在本例中为页面主体）的 x 和 y 位置。您可以通过在鼠标悬停时提醒 x 和 y 值来看到这一点。无论如何，你必须做的是：
var o = $(this).offset(),
x = (ev.pageX - o.left),
y = (ev.pageY - o.top);
我更改了您的代码还存在一些其他问题。首先，您没有为每个画布开始新路径，因此当您重新进入画布时，它会lineTo(x, y)从线路中断的地方开始。为了解决这个问题，我将鼠标悬停事件设置为如下所示：
.mouseout(function() {
c=false;
})
现在，每当它进入新的画布时，它就会开始一条新的路径。
我改变的第三件事是让它只创建上下文once文件准备好。我想这可以节省一点处理时间。所以我在全局范围内添加了这一行：
var contexts = [];
这个方法在你的$('.can')方法链：
.each(function(el) {
id = this.id;
contexts[id] = this.getContext('2d');
})
因此，在代码的其他任何地方，您都可以像这样引用它：
contexts[this.id].beginPath();
现在它起作用了。
