Canvas在Antd design Pro中使用（基于React)

问题1、canvas.drawImage(img, x,y);canvas绘制的img没有出现在x、y值指定的位置。

 ctx.drawImage(img, x,y);

解决：1、canvas 必须在获取元素之后明确指定宽高值，如果在标签中已经写了width,height,还是需要重新指定宽高值。
2、标签中的宽高值，数值要与代码中指定的值大小相同。（否则也会出现坐标点绘制错乱的情况）

 var canvas = document.getElementById('tutorial');
 //如果不指定canvas宽度，高度，会出现drawimg的xy坐标跟值不对应的问题。
 canvas.width = 1000;
 canvas.height = 1000;

 <canvas
      id='tutorial'
      style={{width: '1000px', height: '1000px', border: '1px solid black'}}>
      您的浏览器暂不支持canvas
 </canvas>

问题2、img 标签动态指定图片不显示

 let img = new Image();
 let imgDress=ev.dataTransfer.getData("imgString");//动态获取到的img地址，eg：../../../assets/icon/s1.png
 img.src = require(imgDress)

解决：把图片的路径写到外面，动态拿到图片名字，拼接出图片地址。

 let img = new Image();
 let imgDress=ev.dataTransfer.getData("imgString");//eg:s1.png
 img.src = require("@/assets/icon/"+imgDress);//需要把"@/assets/icon/" 地址提取出来，