用於繪制圖像的畫布庫

Question

HTML5 畫布為使用javascript繪制圖像提供了很大的靈活性。 我們需要根據用戶的輸入生成javascript代碼（例如10個藍色球，5個綠色正方形和一定大小......）。 是否有一個庫提供適當的Javascript API，以便更容易生成畫布以及上面列出的要求的javascript代碼？

Answer 1

使用Fabric.js在畫布上繪制簡單的形狀（圓形，矩形等）非常簡單。 它還支持圖像導入和操作。

例如，顯示矩形就像以下一樣簡單：

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

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

canvas.add(rect);

看看演示 。