輕量級繪圖工具Rough js怎么用

輕量級繪圖工具Rough js怎么用，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

　　Roughjs是一個輕量級的JavaScript圖形庫（壓縮后約9KB），可以讓你在網頁上繪制素描風格、手繪樣式般的圖形。Roughjs定義了繪制直線，曲線，圓弧，多邊形，圓和橢圓的圖元，同時它還支持繪制SVG路徑。

　　Rough.js安裝

　　npminstall--saveroughjs

　　使用

　　constrc=rough.canvas(document.getElementById('canvas'));

　　rc.rectangle(10,10,200,200);//x,y,width,height

　　orSVG

　　constrc=rough.svg(svg);

　　letnode=rc.rectangle(10,10,200,200);//x,y,width,height

　　svg.appendChild(node);

　　Rough.js是值得測試的最新庫之一。

　　并且，最終結果具有華麗的手繪效果。

　　您可以在代碼中構建自定義圖標，條形圖以及幾乎所有您想要的東西。

　　但是，這證明了Web標準正在快速發展，并且我們正在進入一種可能出現此類問題的時代。

　　在撰寫本文時，Rough.js仍處于v0.1beta中，因此它可能尚未準備就緒，可用于實時生產網站。

　　它使用帶有預定義圖案的SVG線來創建看起來真正自然的擺動效果。

　　如果單擊“開始”按鈕，您會注意到它運行的是自定義動畫，看起來確實是手繪的。

　　以通過Rough.js生成的進度條為例。

　　Rough.js手繪樣式JavaScript圖形

　　在GitHub主頁上，您會找到一個部分，列出了運行中的Rough.js的許多示例。

　　您需要的只是Rough.js腳本文件，并且需要耐心處理JavaScript。

　　所有這些都帶有代碼示例，對于任何網站都應該非常容易地進行返工。

　　這是一個示例片段，演示如何在代碼中創建矩形：

　　varrough=newRoughCanvas(document.getElementById('myCanvas'),400,200);

　　rough.rectangle(10,10,200,200);//x,y,width,height

　　一旦理解了代碼，這將非常簡單，但對于初學者來說可能不是最直觀的腳本。

　　這是開始學習并查找可以重做的代碼段的理想場所。

關于輕量級繪圖工具Rough js怎么用問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。