推薦：html5拖曳操作 HTML5實現(xiàn)網(wǎng)頁元素的拖放操作
HTML5之前，要實現(xiàn)網(wǎng)頁元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實現(xiàn),而如今html5大大簡化了網(wǎng)頁元素的拖放操作編程難度,API除了支持瀏覽器內(nèi)部元素的拖放外，同時支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動

先來看一段正常的canvas畫圖語法：


我對canvas原生語法不爽的有兩點：1是每句前面都有寫ctx(即canvas的context2d對象），2是每個函數(shù)或?qū)傩远家�占一行，浪費空間。

我對jQuery的鏈?zhǔn)秸Z法很欣賞，比如：


所以，我也想用這種語法來進行canvas繪圖：


有個辦法就是模擬一個context2d對象，這個對象支持所有的原生context2d方法，但又支持鏈?zhǔn)健?

不過，代碼不能太多，多了就沒人喜歡用了。

下面就是完整的代碼段，這個“類”我取名為XtendCanvas(又是以X開頭的喲)：


使用方法很簡單，給他傳一個canvas對象，他就會返回一個類似context2d的對象，你可以像普通的context2d一樣使用，但不同的是，他支持鏈?zhǔn)秸Z法了：


這樣一來你就可以把所有操作都放在一句話里，你也可以隨時中斷，做其他的事，然后繼續(xù)。

這段代碼并不是對canvas的增強，只是單純的讓他支持鏈?zhǔn)秸Z法了。但勝在代碼少，可以嵌入到任何JS庫中，在此我希望能得到你的一個“推薦”

代碼中肯定有值得改進的地方，大家可以自行完善。但——吃水不忘挖井人，希望大家記得我，最重要的是思路，對吧？下面就是思路：
大家可以看到，代碼中最長的部分，是那個保存方法名的數(shù)組pro，核心代碼反而很短。為什么我要建這么一個數(shù)組呢？

本來我也想直接從CanvasRenderingContext2D繼承所有原生方法，但每個瀏覽器下面遍歷這個CanvasRenderingContext2D，結(jié)果都不一致。如果我把他們直接繼承，那么當(dāng)你想用chrome中的方法套在firefox里執(zhí)行，就會報錯。

所以我只是把CanvasRenderingContext2D中的通用的，無異議的方法與屬性名提取了出來，沒辦法，只有建一個固定的數(shù)組——大家可以自行決定往里面添加你的方法。

方法與屬性提取出來了，接著就是把原生的方法加在我的新對象上。我建了一個叫fn的空函數(shù)，放置我的方法。

由于數(shù)組中的這些元素既有函數(shù)，也有屬性，所以我在循環(huán)中判斷了他是否是一個函數(shù)，如果是函數(shù)，就帶參數(shù)執(zhí)行；不是函數(shù)——那么就肯定是屬性了，就把參數(shù)賦給這個屬性。

這樣大家在碰到設(shè)置canvas屬性的時候，就不用中斷鏈了，直接把屬性值當(dāng)參數(shù)傳進去就行了，比如：


最后，關(guān)鍵的關(guān)鍵，就是返回fn，這招是從jQuery學(xué)來的，是支持鏈?zhǔn)秸Z法的關(guān)鍵。

這段中用到了匿名函數(shù)，閉包，原型，以及我以前文章講過的奇怪的for循環(huán)。

說起來好像挺簡單的，不過我實在是想了很久，希望對大家有用。

在寫代碼的過程中，我發(fā)現(xiàn)chrome的做法很不錯，他有一串以set開頭的函數(shù)，如setStrokeColor,setLineCap等函數(shù)，給他們傳參數(shù)，就可以替代對應(yīng)的strokeStyle和lineCap等屬性，也就是說，他的canvas里面就全是函數(shù)而沒有屬性了那樣的話我就不用判斷是函數(shù)還是是屬性了。但firefox里面沒有這些，所以我還是只能用前面的思路。

我也把那一串set函數(shù)給放出來吧：


他們的用處一看就懂。你也可以選擇一些加入前面代碼的pro數(shù)組中。

最后，我很奇怪我的代碼怎么會沒有高亮了。。。如果你都看到最后了，那么還是給個推薦吧，讓我也虛榮一把

分享：HTML5引入的新數(shù)組TypedArray介紹
Javascript中的數(shù)組是個強大的家伙：你可以創(chuàng)建的時候不規(guī)定長度，而是動態(tài)的去改變長度。你可以把他當(dāng)成普通的數(shù)組去讀取，也可以當(dāng)他是堆棧來使用。你可以改變數(shù)組中每個元素的值甚至是類型