畫出你的風格：HTML5創(chuàng)意畫板的設計教程(4)

表格中明顯看出方案一都是孤立的點，而方案二每個點都會有兩種狀態(tài)，將這兩種狀態(tài)下的點連起來就會形成銜接的較好的效果。

因為基礎的內容在上面已經講述了，所以在這里我也不重復了，需要注意的是當前點與上一個點重復時需要做一下處理，否則頁面無法繪制出來。

if(pos.x==next_pos.x&&pos.y==next_pos.y){
	ctx.arc(pos.x,pos.y,DEFAULT_BRUSH_SIZE/1.7,0,Math.PI * 2,true);
	ctx.fill();//填充繪畫路徑}

else{
	ctx.moveTo(pos.x,pos.y);
	ctx.lineTo(next_pos.x,next_pos.y);
	ctx.stroke();
}

為了方便講解，我這里采用的都是面向過程的方法，在比較大的應用中，我們要盡可能采用面向對象的方法，好處是不言而喻的，不僅能讓代碼條理清晰，更有較好的擴展性，方便二次開發(fā)和模塊復用。使用面向對象方法的代碼請查看這里（這里會使用了point函數類，覆蓋了set和update等方法）請查看DEMO3_1(http://runjs.cn/detail/gvfyrswu)。

研究技術的時候，我們需要舉一反三，顯然現在的方法還是不夠完善。能不能將所有的點都記錄下來，因為每個時間間隔單位，都會損失掉很多的點，為了讓畫出來的圖更加圓滑，我們要將所有的點都記錄下來，并且效率又能得到優(yōu)化，我在這里提出一個解決方案。

用數組記錄下所有的路徑，然后用堆棧的push方法將點添加到數組中，為了達到更好的效率，我們可以采用一維數組，分別用兩個數組記錄橫坐標和縱坐標，具體的實現我就不貼代碼了，大家有余力的話可以當作一個小小的作業(yè)，參照我的這個頁面例子自己編寫代碼實現，頁面中會有代碼注釋的。

我們實現了繪制功能，我們還需要對繪制的圖片進行擦除。不要嘗試采用transparent或者rgba（x,x,x,0）這樣的顏色值繪制，因為這樣頁面便不會繪制出任何東西，最實用的方法就是繪制背景顏色，如果背景是圖片，那就重繪背景圖片，然后就原來的內容的其他部分繪制到畫布中。具體查看demo3_2（http://runjs.cn/detail/jywf4qv1）