Не можете понять этот код JavaScript для рисования холста HTML?

Question

Я был бы признателен, если бы кто-нибудь мог сказать мне, как работает этот код, - я чувствую, что наталкиваюсь головой об стену из-за этого:

1. Как работает инициализация объекта карандашом? Разве карандаш не является функцией - как его можно инициализировать как класс?
2. В функции карандаша, что означает "это"?
3. В функции карандаша зачем мне нужна отдельная переменная "tool"? Я попытался удалить его и заменить обратно на "this", но произошло то, что холст больше не слушал mouseup - вы нажимаете на холст, и он просто продолжает рисовать, даже если ваша мышь поднимается.
4. Откуда берутся ev._x и ev._y? Это часть объекта canvas? Есть ли документация, на которую я могу сослаться?
5. Что такое "layerX" и "offsetX" в функции ev_canvas?
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 просто переменные, указывающие на ev.offsetX а также ev.offsetY которые являются стандартными свойствами объекта события

5. Понятия не имею, что layerX должен быть

6. Так как одна и та же функция вызывается для всех событий (mousedown,mousemove,mouseup), последняя функция просто выясняет, какое событие было вызвано, и вызывает соответствующую функцию в вашем экземпляре карандаша (tool).