问题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/" 地址提取出来,