Ответ 1
Вы не можете сделать это точно, но вы можете подключить метод getContext и вернуть расширенный 2D-контекст, который имеет дополнительные свойства и методы:
(function() {
// save the old getContext function
var oldGetContext = HTMLCanvasElement.prototype.getContext;
// overwrite getContext with our new function
HTMLCanvasElement.prototype.getContext = function(name) {
// if the canvas type requested is "othercontext",
// augment the 2d canvas before returning it
if(name === "othercontext") {
var plainContext = oldGetContext.call(this, "2d");
return augment2dContext(plainContext);
} else {
// get the original result of getContext
return oldGetContext.apply(this, arguments);
}
}
// add methods to the context object
function augment2dContext(inputContext) {
inputContext.drawSmileyFace = function() { /* ... */ };
inputContext.drawRandomLine = function() { /* ... */ };
inputContext.eraseStuff = function() { /* ... */ };
return inputContext;
}
})();
Таким образом, вызов someCanvas.getContext("othercontext").drawSmileyFace() будет вызывать drawSmileyFace, который был добавлен к обычному возвращаемому значению 2D-контекста getContext("2d").
Однако я не решаюсь предложить использовать этот шаблон в фактическом развернутом коде, потому что:
- Ваше имя контекста позднее может быть реализовано браузерами, а перезапись
getContextпредотвратит доступ к этому типу контекста. - В более общем плане обычно плохая практика для расширения функциональности объектов хоста, таких как элементы DOM, поскольку объекты-хосты могут (но обычно этого не делать) бросать ошибки на совершенно обычные операции, такие как доступ к свойствам