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

溫馨提示：在鍵盤上輸入p鍵可以導(dǎo)出圖片，圖片導(dǎo)出功能由于在新窗口中打開，請使用全屏預(yù)覽模式并允許窗口彈出。

其實我們還可以有更多變化，只要你去構(gòu)想，去思考。很多時候你都要去嘗試，往往多次嘗試才會有新的ideas。接下來我們可是做出以下特殊的畫筆，比如說鋼筆效果，邊緣會比較筆觸比較重的。鋼筆效果需要將畫筆尺寸調(diào)小，減弱抽絲的效果，并且邊緣的鋸齒會比較明顯，所以需要做一下陰影模糊處理，讓其過渡更平滑。

具體源碼看這里：demo5（http://runjs.cn/detail/df5u6cb5）

之前曾在這里見過一個毛筆畫網(wǎng)站，所以也模擬了一下毛筆的效果，毛筆的特點是筆觸比較大，當(dāng)收筆較快時邊緣要凹凸不平，筆尖寫字鋒棱易出。當(dāng)收筆有停頓時則會圓潤而渾厚。有個類似的線上應(yīng)用，大家可以去研究研究：http://www.theshodo.com/Write。

根據(jù)這些特點，我給大家提供一個DEMO源碼，是在鋼筆效果的基礎(chǔ)上做些小小的調(diào)整的。

如果大家還覺得這樣的效果是否還可以添加點特效什么的，對，可以做雜點斑點的效果，還有墨水過多而流下的效果。

具體可以參看DEMO6（http://runjs.cn/detail/ully3puv）和DEMO7。

源碼我就不進(jìn)行分析了，留待大家自己去研究，將畫筆顏色調(diào)為黑色就差不多可以模擬出毛筆的效果了。在我看來，技術(shù)的專研不是一味的讓別人教你，而是讓你自己去領(lǐng)悟的。只有那樣你才真正學(xué)到技術(shù)，領(lǐng)略到不一樣的樂趣。

說些設(shè)計以外的東西，設(shè)計、編程都需要有自己的思想和靈魂，真正讓別人也能感受到你的思路，而這一切都需要磨練，需要舉一反三。不應(yīng)該滿足于現(xiàn)狀，我在這里只列舉了其中一些效果，我相信還有很多效果可以實現(xiàn)，比如說類似于這樣的噴霧效果，鉛筆字效果，藝術(shù)畫效果，等等。既然說HTML5創(chuàng)意畫板，那就要嘗試脫離這個畫板的束縛，學(xué)到更多的東西，比如說你可以用這個畫板做什么，可以做一個記事本、涂鴉工具、處理和分享圖片，個性簽名，你還可以做一些小游戲，涂鴉類的游戲，你畫我猜（需要采用websocket實現(xiàn)服務(wù)器端雙向通信）等等，甚至可以做一些canvas動畫，這些基礎(chǔ)上做些修改和調(diào)整，完全是可以實