fabric.js-HTML5 Canvas 加強套件

fabric.js-HTML5 Canvas 加強套件

HTML5 Canvas 出了以後對於動畫這塊真的很棒,但要用原生 Canvas 提供的 API 去繪製一些圖形,通常我們會也利用物件導向的概念去封裝它在使用,語法複雜,而 Fabricjs 就幫我們做好這些事情,讓我們能夠透過把新增物件的方式,快速的去把我們想要的圖形繪製出來,並且提供很方便事件接口讓我們能輕鬆的操控canvas 的動作。

什麼是 Fabricjs

一個基於 HTML5 Canvas API 所建立的 Library
用新增物件的方式快速建立 Canvas 圖形。

可建立的物件有包括

  • 簡單的幾何圖形,如圓形、矩形、多邊形,或是線條。
  • 複雜多個節點的圖形
  • 匯入圖片
  • 匯入 svg

可以輕鬆使用滑鼠控制這一切你所創造的物件,如

  • 位置
  • 大小
  • 旋轉角度

且透過 javascript 去控制這些你所建立的物件圖形的屬性像是

  • 顏色
  • 透明度
  • 圖層 (z-index)

實際應用

Fabricjs 能夠讓我們快速、簡單的將 Canvas 中的圖形包裝成物件,且和使用者互動。一般最常見的實作是製作網頁編輯器

官方網址: 點我進入
demo: 點我進入 (相容es5)

夾尾巴

不知道甚麼端的工程師,低薪努力中

Related Posts

Bootstrap 5 alpha1 發布 不支援IE 不依賴jquery

Bootstrap 5 alpha1 發布 不支援IE 不依賴jquery

Smooth Scrollbar 平滑滾動條 JS 套件 可讓滾輪更自然

Smooth Scrollbar 平滑滾動條 JS 套件 可讓滾輪更自然

寫sass 新增config.rd 的方便

寫sass 新增config.rd 的方便

Swiper.js 輪播JS 套件

Swiper.js 輪播JS 套件

No Comment

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *