2013-12-11 56 views
0

我正在使用Html5畫布工作,我想向Canvas對象添加方法。像這樣...如何將方法添加到Html5畫布?

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 
+0

我想你會想創建一個包含對畫布對象的引用的「類」,而不是。 IOW,使用組合,而不是擴展。 –

+1

除非是爲了課堂作業,否則不要聽白色的警笛聲,只要繼續向CanvasRenderingContext2D.prototype添加方法即可。 JavaScript有足夠的缺陷不能使用它的靈活性。改變一個原型完全是'合法'的,我沒有(?)?轉化爲一個蟾蜍使用它。 – GameAlchemist

+1

@GameAlchemist:我也是...... ribit,ribit,ribit :)我總是添加原型,但我很少改變現有的方法 - 糟糕的Karma! – markE

回答

0

我強烈建議不要嘗試擴展瀏覽器的本地對象。

  • 將新功能粘貼到無法控制的類上是非常糟糕的編程習慣。它降低了代碼庫的可維護性。

  • Web安全可能不喜歡你用原生對象搞亂了思想原型

  • 你不能保證畫布API保持一樣在未來的瀏覽器,因此您的功能可能會與未來的瀏覽器交鋒

改爲使用封裝或代理設計代理模式,並編寫您自己的Canvas類包裝器,您可以在其中添加自己的方法。

更多關於這個(幾乎是相關的)所涉事項:

Subclassing CanvasRenderingContext2D

但是如果你想要畢竟這個障礙增加新的功能,以現有的JavaScript對象做到這一點很容易爲:

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

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


c.alert(); 
+0

-1:對原型變化的厭惡是一個銷售良好的消息,並且可能適用於*一些*變化,在300,000行代碼項目中,該項目的構建可持續10年或更長時間。對於99.9999%的變化,說「不依賴於html規範,它們可能會改變」相當重要。 – GameAlchemist

+0

因此,擴展Canvas是一個好主意? –

+0

呃我不同意downvote。對於OP想要做什麼來擴展畫布看起來很愚蠢。 – Loktar