使用canvas，在图片上实现识别标注

核心思想

• 需要将图片传至后端，后端返回需要标注的物品的坐标及识别到的名称，此篇坐标为左上角和右下角；
• 使用canvas的绘图功能。在现实的图片上绘制矩形，并调整样式。
  实现效果如图：
  

初始化canvas

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

显示图片

• drawImage接受五个参数：图片、x坐标、y坐标、宽度、高度；
• 图片、x、y为必须参数；

ctx.drawImage(img, 0,0,width,height)

绘制矩形

• strokeStyle ：描边矩形颜色；
• rect(x,y,width,height)：描边矩形，参数为x坐标、y坐标、宽、高；
• fillStyle：填充颜色；
• fillRect(x,y,width,height)：填充矩形，参数为x坐标、y坐标、宽、高。

ctx.strokeStyle = 'red';
ctx.rect(x,y,wid,hei);
ctx.fillSt