fabric.js是一個強大而簡約的依賴HTML5上的 canvas的javascript庫，Fabric在canvas元素頂部提供了交互式對象模型，它還具有SVG到畫布（和畫布到SVG）解析器，官網上提供了豐富的案例，可照葫蘆畫瓢，足夠滿足大部分的開發場景。

最近在開發工業互聯網的客戶端應用，有個場景需要用到canvas畫圖功能，大致描述就是需要先加載八張圖片，然后在圖片上根據坐標畫出標注的信息，但是在你需要切換數據源的時候，重新繪制，就需要清空畫布然后對新的數據源進行繪圖，于是就有了下面的經驗總結

在使用fabric Canvas繪制圖像的時候，常常需要更新畫布的內容，于是需要清空之前繪制的內容，并使畫布回到原始的狀態（如果你使用了拖拽或者放大的功能），只需要執行

canvas.clear();?//?清空畫布

如果你畫布上的某個元素處于選中狀態，則需要

canvas.remove(canvas.getActiveObject());

來移除該元素，最后需要做的就是將畫布的視窗回到初始化狀態

canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);

其實通過zoomToPoint以鼠標中心縮放畫布是通過重新計算視口然后transform變換來達到的，而以上矩陣則是視口矩陣的初始值。

總結

以上是生活随笔為你收集整理的fabric canvas 清空并重置画布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。