Как добавить методы в холст Html5?

Question

Я работаю над проектом с использованием холста Html5, я хочу добавить методы в Canvas Object. Что-то вроде этого ...

HtmlCanvas.alert = function() { alert("width : " + this.width + ", height : " + this.height) }; // adding method 
var canvas1 = document.getElementById("myCanvas1"); // getting canvas1 
canvas1.width = 200; // setting width 
canvas1.height = 200; // setting height 

var canvas2 = document.getElementById("myCanvas2"); // getting canvas1 
canvas2.width = 100; // setting width 
canvas2.height = 100; // setting height 

canvas1.alert(); // alert info 
canvas1.alert(); // alert info 

Answer 1

Я настоятельно рекомендую не пытаться распространять собственные объекты веб-браузеров.

• Очень плохой практикой в ​​программировании применять новые функции к классам, которые не поддаются контролю. Это уменьшает ремонтопригодность базы кода.

• веб-безопасности может не нравится идея вы баловаться с собственными объектами Прототипы

• Вы не можете гарантировать Canvas API остается, как же в будущем браузеров и, таким образом, ваши функции могут конфликтовать с будущими браузерами

Вместо этого используйте шаблоны прокси-шаблонов инкапсуляции или прокси-сервера и напишите свою собственную оболочку класса Canvas, где вы можете добавить свои собственные методы.

Подробнее об этом деле в этом (почти соответствующий) вопрос:

Subclassing CanvasRenderingContext2D

Однако, если вы хотите сделать это после того, как все это пессимизм, добавив новые функции к существующим объектам JavaScript легко, как:

var c = document.getElementById("myCanvas1"); 

c.alert = function() { 
    alert("xxx"); 
} 


c.alert();