如果您想自下而上学习它,我建议任何人避免使用任何库。
您可以为每条线创建一个内部对象,以保存所有重要信息,例如线坐标、源和您要附加的任何其他类型的信息。
然后将画布视为来自这些对象的线条的简单被动视口/渲染。
例子:
function myObject() {
this.line = [x1, y1, x2, y2]; /// initialize with constructor of manually
this.source = 'Bob';
... any other information ...
return this;
}
现在你有了一个对象。您可以简单地将它们存储到一个数组中:
var objectStack = [];
var object1 = new myObject();
object1.line = [0, 0, 100, 100];
object1.source = 'Joe';
...
objectStack.push(object1);
/// next
下一个合乎逻辑的步骤当然是将对象渲染到画布上。由于画布只是一个像素池,不适用于对象,因此它只能用作这些数据的视口。
但是,由于您在内部使用对象,您可以从画布中获取坐标并使用它来检查每个对象。如果您愿意,您可以在此阶段使用 jQuery,但实际上没有必要:
canvas.onclick = function(e) {
/// adjust coordinates
var rect = canvas.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
/// iterate objects
...
}
对于简单的线条,您可以使用上下文函数isPointInStroke()
(例如,您可以看到我之前关于如何使用它的答案)函数,或者您可以使用其他数学方法来确定该点是否在线。
如果它是当前对象将是您需要的对象。
这种方法的另一个优点是您可以合并将对象自我更新到画布等的方法和函数。
如果您不想手动执行此操作,您始终可以使用为您完成所有这些操作的众多库之一,但会限制您如何定义对象。