今天必須給大伙說說一個超有意思的開源庫，在GitHub上已經斬獲20K星標啦，它能輕松給網頁設計加上手繪風格的“濾鏡”，讓頁面瞬間告別千篇一律，充滿藝術感！

一、Rough.js是什么？

這個名為Rough.js輕量級的圖形庫，大小才8KB，能賦予網頁元素自然又獨特的手繪質感。通過一套特別的算法，模擬出咱們日常手繪時那種不規則的感覺，讓數字內容不再冷冰冰，而是多了幾分生動的手作溫度。不管是圖表、流程圖，還是各種UI組件，開發者只要簡單敲上幾行代碼，就能讓它們大變樣。

項目地址給大家放在這兒啦：Rough.js項目地址
更多【前端】好文請關注：https://www.panziye.com/front

二、Rough.js都有啥厲害之處？

（一）手繪風格渲染引擎

Rough.js的手繪風格渲染引擎堪稱一絕！就拿下面這段代碼來說：

// 繪制手繪風格圓形
const rc = rough.canvas(document.getElementById('canvas'));
rc.circle(80, 80, 60, {
  roughness: 2.3,  // 控制筆觸粗糙度，數值越大，線條看起來越粗糙
  bowing: 5,      // 線條彎曲程度，數值可以調整線條的彎曲度
  fill: 'pink'    // 支持填充色，這里設置為粉色
});

通過調整像roughness（控制筆觸粗糙度）、bowing（線條彎曲程度）這些參數，就能呈現出鉛筆素描、馬克筆涂鴉等各種不同效果，而且還支持實時動態修改圖形屬性，輕松打造出獨一無二的手繪圖形。

（二）全類型圖形支持

1. 基礎圖形：像直線、曲線、多邊形、路徑這些基礎圖形，Rough.js都能輕松繪制，完全不在話下。
2. 復雜圖形：組合圖形、自定義SVG這些稍微復雜點的圖形，它也能完美駕馭，給開發者更多創意發揮空間。
3. 動態交互：它還支持點擊動畫、懸停效果這些動態交互，讓網頁元素“活”起來，增強用戶體驗。
4. 擴展組件：能和React、Vue等常見框架深度集成，進一步拓展了應用場景。

（三）跨平臺兼容

Rough.js在兼容性方面也做得非常出色，不管你用的是什么瀏覽器、渲染引擎，還是開發框架，它基本都能適配：

三、它都能用在哪些地方？

（一）數據可視化增強

平常那些枯燥的數據圖表，用Rough.js加工一下，就能變得像藝術展品一樣吸引人，讓數據展示不再單調。

（二）教育課件制作

在制作教育課件時，用它模擬黑板板書的效果，能讓學生們瞬間回到課堂，增加教學的親切感，學習起來也更有代入感。

（三）原型設計工具

做原型設計的時候，用Rough.js可以快速創建低保真設計稿，幫助團隊更高效地溝通設計思路。

（四）游戲界面開發

想打造獨特的繪本風格游戲UI？Rough.js就能派上用場，讓游戲界面充滿童話般的夢幻感。

（五）電子手賬應用

在電子手賬應用里，它能實現真實的書寫筆觸效果，就像真的在本子上寫字畫畫一樣，記錄生活變得更有儀式感。

（六）創意互動裝置

用在創意互動裝置上，能營造出有溫度的數字藝術體驗，給觀眾帶來不一樣的感受。

四、和其他項目比有啥優勢？

和一些同類項目相比，Rough.js的特點非常明顯：

五、新手怎么快速上手？

（一）安裝依賴

新手想使用Rough.js，操作也不難，先安裝依賴，在代碼里加上這行：

<script src="https://unpkg.com/roughjs@4.5.2/bundled/rough.js"></script>

（二）創建畫布

接著，創建畫布：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const rc = rough.canvas(canvas);

（三）繪制圖形

最后，就可以繪制圖形啦，比如畫一個會呼吸的矩形：

// 繪制會呼吸的矩形
rc.rectangle(10, 10, 100, 100, {
  roughness: 3,
  stroke: '#ff3300',
  strokeWidth: 2,
  fill: 'rgba(255,200,0,0.4)'
});

六、Rough.js還有哪些隱藏優點？

除了上面提到的，Rough.js還有不少優勢：

1. 設計友好：設計師能直接把Sketch稿件的SVG路徑導出來用，非常方便。
2. 性能卓越：就算要渲染上萬級別的圖形，它依然能保持60fps的流暢度，完全不會卡頓。
3. 擴展性強：它提供了插件系統，開發者可以自定義筆刷，實現更多個性化的需求。
4. 文檔完善：不僅有中文教程，還有在線交互式演示，新手跟著學，上手超輕松。

七、豐富的開發者生態

Rough.js還有官方維護的擴展庫，像rough - charts（手繪風圖表）、rough - notation（動態標注效果）、rough - viz（數據可視化組件），進一步拓展了它的功能，讓開發者能玩出更多花樣。

總的來說，Rough.js給數字界面帶來了滿滿的手作溫度，特別適合那些需要營造親切感、藝術感的場景，或者教育類項目。而且它學習成本很低，平均30分鐘就能上手，絕對是提升產品差異化的好幫手！寶子們要是感興趣，趕緊去試試，記得點贊收藏哦！