如今，Canvas讓我們可以在網上創建一些絕對令人驚嘆的圖形。但它提供的API 令人失望。如果我們只想在畫布上繪製幾個基本形狀，簡直困難。
另外Canvas在任何時候改變圖片或繪製更複雜的形狀時，坐標會發生變化，更何況是換圖片或形狀。

Fabric就是在解決這些問題
Fabric.js為Canvas提供所缺少的Object, Svg Parser, 交互和一整套其他不可或缺的工具。

原生Canvas只允許我們觸發簡單的圖形命令，盲目地修改整個畫布位圖。
想畫一個矩形？使用fillRect(left, top, width, height)。
想畫一條線？使用的組合moveTo(left, top)和lineTo(x, y)。
就像我們用畫筆在劃畫布一樣，在上面塗上越來越多，到最後幾乎無法控制。

Fabric不是如此，而是在本機方法之上提供簡單但功能強大的對像模型，它負責畫布狀態和渲染，並允許我們直接使用”模型”，指定某個圖片或形狀，加修改。

讓我們來看一個展示這種差異的簡單例子。假設我們想在畫布上的某處畫一個紅色矩形。

以下是使用原生<canvas> API執行此操作：

// reference canvas element (with id="c")
var canvasEl = document.getElementById('c');

// get 2d context to draw on (the "bitmap" mentioned earlier)
var ctx = canvasEl.getContext('2d');

// set fill color of context
ctx.fillStyle = 'red';

// create rectangle at a 100,100 point, with 20x20 dimensions
ctx.fillRect(100, 100, 20, 20);

我們再來看看Fabric 做同樣的事情：

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

從代碼的行數上看，幾乎沒有差別，但是你大概已經發現使用Fabric 與 Canvas上的差別了。

Canvas：
我們操作代表整個canvas位圖的Objectcontext,

Fabric ：

建立”模型”的方式去設定屬性，然後將它們添加到canvas中去。
由此可見，fabric是操作 Object 的。

接下來我們嘗試把這個方塊做個旋轉吧~

以下是使用原生<canvas> API執行此操作：

var canvasEl = document.getElementById（'c'）; 
var ctx = canvasEl.getContext（'2d'）; 
ctx.fillStyle ='red'; ctx.translate（100,100）; 
ctx.rotate（Math.PI / 180 * 45）; 
ctx.fillRect（-10，-10,20,20）;

我們再來看看Fabric 做同樣的事情：

var canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

canvas.add(rect);
rect.set({ left: 20, top: 50 });
canvas.renderAll();

注意了嗎? 原生的canvan旋轉完還要偏移，才能正確地在正中間呢。在使用fabric的時候我們不再需要在我們嘗試修改任何內容的時候，先擦清除內容， fabric 我們只需要改變目標的Object屬性達到刷新視圖的目的。

今天先到這，下篇再來介紹更多 Fabric 的強大的地方

資料來源：http://fabricjs.com/fabric-intro-part-1