這篇文章主要講解了“JS前端怎么以輕量fabric.js實現canvas”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JS前端怎么以輕量fabric.js實現canvas”吧！
canvas 很強大，能夠讓我們創建一些令人驚嘆的圖形和功能，不過它僅僅是用來繪制而已，如果要進行一些交互或者改變畫布上的內容，就是一件很麻煩的事情。好在 fabric.js 為 canvas 提供了一個缺失的對象模型，它負責管理畫布的狀態和渲染，可以讓我們直接使用對象來操縱畫布，極大方便了開發。
顯然有同學沒有去試一下 fabric.js，所以這里我們簡單看一下它的使用方式：
// 第一步：初始化畫布
const canvas = new fabric.Canvas('canvas');
// 第二步：創建物體
const rect = new fabric.Rect({
top: 200,
left: 100,
width: 100,
height: 100,
fill: 'green',
});
// 第三步：向畫布中添加物體，調用 add 才會繪制到畫布中
canvas.add(rect);
// 第四步：讓物體動起來
rect.animate(
{ top: 50, left: 400, angle: 45 },
{ duration: 1000, onChange: canvas.renderAll.bind(canvas) }
);只要上面少許的代碼，就能在 canvas 中畫出一個綠色矩形，并且讓它動起來，此外還默認支持三種變換操作（平移、旋轉、縮放），非常適用于一些編輯和交互類的場景。
那 fabric.js 是個啥呢，我們引入這個庫之后可以在控制臺打印一下 fabric：
會看到 fabric（就是命名空間）下掛載這一堆東西（各種類等），我們再截個源碼的圖：
和控制臺打印的結果大體能匹配上，fabric.js 的源碼寫的還是很清楚的，幾乎每個文件都是一個類，層次分明，注釋也多（不過是英文的），通過名字你也能猜測這個類是干什么的。我們則會實現它的核心部分并講解一些具體思想，大概是下面這個樣子：
如果你沒接觸過類似的東西，肯定會有很多困惑????，比如：
怎么判斷物體被點選和框選
變換操作怎么搞
動畫怎么弄
怎么分組
如何擴展
要啥數學知識
... 那就讓我們帶著問題一起學習吧????。
鑒于有些同學 canvas 接觸的比較少，所以這里就簡單總結和回顧下 canvas 的一些基礎知識。事實上 canvas 的 api 并不多，就像 html 中的標簽，常用的就那么幾個，但你沒碰過就會總覺得它很多又不好學，其實我們只要知道它能做什么就行????：
它能畫圓弧、矩形、圖片、文本、線段、貝塞爾曲線、svg
畫的時候可以設置各種屬性，主要有線寬、填充色、描邊色 沒了，你只要記住這兩點就行，剩下的全靠想象，比如：
你要畫一個圓就用圓弧來畫
你要畫一個點就用一個很小的圓來畫
你要畫一個多邊形，那就用多條線段相連
你要畫一個很長的曲線，那就用多段貝塞爾曲線相連，或者用多段很小很小的線段以直代曲
你要畫個圖表，那就得一筆一筆慢慢畫，比如雷達圖就是一堆圓圈和一個多邊形組成
當然最好配合上圖片，這樣能讓 canvas 看起來更加多姿多彩
... 另外你還要知道 canvas 雖然是個標簽，但它其實就是一幅畫，畫完的東西是不可改的，只能覆蓋或者重新畫；也無狀態，canvas 并不知道你畫的是啥，也不知道你鼠標點的是哪個物體，要是想稍微修改下畫布上面物體的大小或者讓物體動起來，那一定是要清除（整個或局部）畫布再重新繪制的。 然后再說幾個注意事項：
畫新的幾何圖形和線條之前最好都要調用一下 beginPath，不然前后兩個圖形可能會相互影響，這是個好習慣。
save() 和 restore() 一定要配對使用，這也是個好習慣。
善于運用 transform 的三種變換，以后的章節會講解到。
這里簡單擴充下 save 和 restore 這個知識點，因為一開始我們可能會對這個 api 的用法比較迷茫。一般來說 canvas 上面的東西是一個一個繪制的，每個東西有自己的狀態，以 lineWidth（線寬） 和 strokeStyle（描邊色） 為例子：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// ... 這里如果有繪制東西，用的是默認值
ctx.save(); // ---------①開始----------↓
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.strokeRect(0, 0, 20, 20);
ctx.save(); // ----------②開始---------↓
ctx.lineWidth = 2;
ctx.strokeStyle = 'green';
ctx.strokeRect(20, 20, 20, 20);
ctx.save(); // ----------③開始----------↓
ctx.lineWidth = 3;
ctx.strokeStyle = 'blue';
ctx.strokeRect(40, 40, 20, 20);
// ... 這里如果有繪制東西，用的是③的狀態
ctx.restore(); // ---------③結束----------↑
// ... 這里如果有繪制東西，用的是②的狀態
ctx.restore(); // ----------②結束---------↑
// ... 這里如果有繪制東西，用的是①的狀態
ctx.restore(); // ----------①開始---------↑
// ... 這里如果有繪制東西，用的是默認值效果大概是下面這個樣子：
你可以把 save 和 restore 當做一對花括號????，所以它們得成對出現，每個括號里面是一種新的繪制狀態，括號外面又是另一種狀態。
它的本質是棧的結構（就是只能尾部添加或刪除的數組），save 的時候會把當前的一堆狀態屬性保存起來（就是一個大對象），restore 的時候就是將棧頂的保存的狀態拿出來置為當前的狀態，看看下面這張圖應該能比較好的理解????????：
我自己覺得 canvas 的庫大體都是數據驅動視圖的一種很好體現，我們只負責單純的修改數據（物體的各種屬性狀態值），canvas 只負責單純的繪制，兩者各司其職，互不干擾，也有點單向數據流的味道。
感謝各位的閱讀，以上就是“JS前端怎么以輕量fabric.js實現canvas”的內容了，經過本文的學習后，相信大家對JS前端怎么以輕量fabric.js實現canvas這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
