canvas相关库的选择

绘制复杂的画布图形。可以让我们像操作 DOM 一样来操作 canvas，并提供了对 canvas 中元素的事件机制，拖放操作的支持。

fabricjs举例

比如我们正常用canvas画一个小正方形是这样的。

// 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);

是不是方便了很多

react-konva举例