js：使用canvas做一个图片标注功能

canvas相关库的选择

名称	star（2021.3）	文档	备注
fabricjs	18.2k	http://fabricjs.com/	--------
konva	6k	https://konvajs.org/	----------
react-konva	3.8k	同上	---------
vue-konva	682	同上	----------
react-canvas	2.8k	-	2007年不维护了，不支持react16，慎用

绘制复杂的画布图形。可以让我们像操作 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举例