无法理解此JavaScript代码来绘制HTML画布？

Question

我会很感激，如果有人可以告诉我这个代码是如何工作 - 我觉得我撞我的头撞在墙上了这一点：

1. 如何初始化铅笔对象的工作？铅笔不是一个函数 - 它如何像一个类一样被初始化？
2. 在铅笔功能中，“this”是指什么？
3. 在铅笔功能中，为什么我需要一个单独的“工具”变量？我尝试删除它，并用“this”替换它，但是发生的事情是canvas不再听mouseup - 你点击画布，即使你的鼠标上升，它也会继续绘制。
4. ev._x和ev._y从哪里来？这是画布对象的一部分吗？有我可以参考的文件吗？
5. ev_canvas函数中的“layerX”和“offsetX”究竟是什么？
6. 你能帮我理解最后几行吗？我不知道他们的意思，我也没有看到JS这样写。

谢谢！

var func = tool[ev.type]; 
if (func) { 
    func(ev); 
} 

谢谢！

// Initialize variables 
var canvas = document.getElementById('imageView'); 
var context = canvas.getContext('2d'); 
var tool = new pencil(); 

function init() { 
    // Add listeners 
    canvas.addEventListener('mousedown', ev_canvas); 
    canvas.addEventListener('mousemove', ev_canvas); 
    canvas.addEventListener('mouseup', ev_canvas); 
} 

// Pencil tool 
function pencil() { 
    var tool = this; 
    this.started = false; 

    // Mousedown 
    this.mousedown = function (ev) { 
     context.beginPath(); 
     context.moveTo(ev._x, ev._y); 
     tool.started = true; 
    }; 

    // Mousemove 
    this.mousemove = function (ev) { 
    if (tool.started) { 
     context.lineTo(ev._x, ev._y); 
     context.stroke(); 
    } 
    }; 

    // Mouseup 
    this.mouseup = function (ev) { 
    if (tool.started) { 
     tool.mousemove(ev); 
     tool.started = false; 
    } 
    }; 
} 

// Determines mouse position relative to canvas 
function ev_canvas (ev) { 
    // if (ev.layerX || ev.layerY == 0) { // Firefox 
    // ev._x = ev.layerX; 
    // ev._y = ev.layerY; 
    // } else 
    if (ev.offsetX || ev.offsetX == 0) { // Opera 
    ev._x = ev.offsetX; 
    ev._y = ev.offsetY; 
    } 

    // Call the event handler of the tool. 
    var func = tool[ev.type]; 
    if (func) { 
    func(ev); 
    } 
} 

init(); 

Answer 1

1. 铅笔是一类。在JavaScript中，类构造器的形式为function MyClass()

2. this用于指向构造函数或成员函数中的类本身。因此，this.mouseup()可以从一个实例（在你的情况）访问tool.mouseup()

3. 因为这是你的班级用来跟踪移动的变量。如果您想更换tool，你必须更换tool.started分配和评价以及

4. ev._x和ev._y只是这是事件对象

5. 不知道的标准属性变量在ev.offsetX和ev.offsetY指着什么layerX应该是

6. 由于相同的函数被调用的所有事件（mousedown，mousemove，mouseup），最后一个函数只是图查看哪个事件被触发并在您的铅笔实例中调用相应的功能（tool）。