畫(huà)出你的風(fēng)格：HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程(4)

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

因?yàn)榛A(chǔ)的內(nèi)容在上面已經(jīng)講述了，所以在這里我也不重復(fù)了，需要注意的是當(dāng)前點(diǎn)與上一個(gè)點(diǎn)重復(fù)時(shí)需要做一下處理，否則頁(yè)面無(wú)法繪制出來(lá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();//填充繪畫(huà)路徑}

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

為了方便講解，我這里采用的都是面向過(guò)程的方法，在比較大的應(yīng)用中，我們要盡可能采用面向?qū)ο蟮姆椒?，好處是不言而喻的，不僅能讓代碼條理清晰，更有較好的擴(kuò)展性，方便二次開(kāi)發(fā)和模塊復(fù)用。使用面向?qū)ο蠓椒ǖ拇a請(qǐng)查看這里（這里會(huì)使用了point函數(shù)類，覆蓋了set和update等方法）請(qǐng)查看DEMO3_1(http://runjs.cn/detail/gvfyrswu)。

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

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

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