最近项目中需要用canvas实现图片的拖放以及缩放，还要能够在图片上进行路径绘制，但是我进行路径绘制之后进行拖放操作，会清空之前的路径
经过检查 发现是每次进行拖放操作时会先清空画布 context.clearRect(0, 0, canvas.width, canvas.height);，当注释掉这一句的时候图片就会无限拖放复制，请各位看看有什么解决办法让两者可以兼容
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<style>
span{
display: inline-block;
width: 50px;
line-height: 40px;
color: #fff;
background: #ccc;
margin: 20px;
text-align: center;
cursor: pointer;
}
</style></head>
<body>
<div id="testid">
<div id="div1" style="width:100px; height:20px;"></div>
<div>
<span onclick="move()">移动</span>
<span onclick="draw()">画图</span>
</div> <canvas id="canvas" width="800" height="800" style="margin-left:20px; margin-top:20px;border: 1px solid #000" onMouseMove="cnvs_getCoordinates(event);"></canvas>
</div>
<script type="text/javascript">
var canvas, context;
var img,//图片对象
icon,//图标
imgIsLoaded,//图片是否加载完成;
iconIsLoaded,//icon图片是否加载完成;
imgX = 0,
imgY = 0,
imgScale = 1;
initX = 50;
initY = 50;
iconX = initX;
iconY = initY;
isDrag = true;//判断是否拖拽
var color=0;//记住所选颜色
var X,Y,X1,Y1;//画图坐标
var isMouseDown=false;//记录鼠标是否按下
var flag=0;//记录绘图路径
(function int() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
loadImg();
})();
function move(){
isDrag = true;
}
function draw(){
isDrag = false;
}
//绘制画图
function drowline(num1,num2,num3,num4){
//开启新的路径
if(flag)
context.beginPath();
//移动画笔的初始位置
context.moveTo(num1,num2);
context.lineWidth=2;
if(color==0){
context.strokeStyle="red";
}else if(color==1){
context.strokeStyle="green";
}else if(color==2){
context.strokeStyle="blue";
}
//移动画笔的结束位置
context.lineTo(num3,num4);
//开始绘制
context.stroke();
if(flag!=0){
X=X1;
Y=Y1;
}
}
//图片拖放缩小
function loadImg() {
img = new Image();
img.onload = function () {
imgIsLoaded = true;
drawImage();
}
img.src = "../assets/img/insert.png"; //矢量图
icon = new Image();
icon.onload = function () {
iconIsLoaded = true;
drawImage();
}
icon.src = "../assets/img/addimg.png"; // 地图上的图标
}
function drawImage() {
if(isDrag){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0, img.width, img.height, imgX, imgY, img.width * imgScale, img.height * imgScale);
context.drawImage(icon, iconX, iconY);
}
}
canvas.onmousedown = function (event) {
if(isDrag){
var pos = windowToCanvas(canvas, event.clientX, event.clientY);
canvas.onmousemove = function (event) {
canvas.style.cursor = "move";
var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
var x = pos1.x - pos.x;
var y = pos1.y - pos.y;
pos = pos1;
imgX += x;
imgY += y;
iconX = imgX + initX;
iconY = imgY + initY;
drawImage();
}
canvas.onmouseup = function () {
canvas.onmousemove = cnvs_getCoordinates;
canvas.onmouseup = null;
canvas.style.cursor = "default";
}
}else{
isMouseDown=true;
X= event.offsetX;
Y= event.offsetY;
canvas.onmousemove = function (event) {
if(isMouseDown){
X1= event.offsetX;
Y1= event.offsetY;
drowline(X,Y,X1,Y1);
flag++;
}
};
canvas.onmouseup=function () {
isMouseDown=false;
flag=0;
}
}
}
canvas.onmousewheel = canvas.onwheel = function (event) {
var pos = windowToCanvas(canvas, event.clientX, event.clientY);
event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
if (event.wheelDelta > 0) {
imgScale *= 2;
imgX = imgX * 2 - pos.x;
imgY = imgY * 2 - pos.y;
initX = initX * 2;
initY = initY * 2;
iconX = imgX + initX;
iconY = imgY + initY;
} else {
imgScale /= 2;
imgX = imgX * 0.5 + pos.x * 0.5;
imgY = imgY * 0.5 + pos.y * 0.5;
initX = initX / 2;
initY = initY / 2;
iconX = imgX + initX;
iconY = imgY + initY;
}
drawImage();
}
function windowToCanvas(canvas, x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: x - bbox.left - (bbox.width - canvas.width) / 2,
y: y - bbox.top - (bbox.height - canvas.height) / 2
};
}
function cnvs_getCoordinates(event) {
var pos = windowToCanvas(canvas, event.clientX, event.clientY);
var w = iconX + icon.width;
var h = iconY + icon.height;
var mydiv = document.getElementById("div1");
mydiv.innerHTML = 'eventX=' + pos.x + 'eventY=' + pos.y + 'iconX=' + iconX + 'iconY=' + iconY;
if (pos.x >= iconX && pos.x <= w && pos.y >= iconY && pos.y <= h) {
// 当鼠标移动到icon上时，显示abc
mydiv.innerHTML = 'abc';
} else {
}
}
</script>
</body>
</html>
希望更改过后的代码能够实现图片拖放，之后还能按照上一步绘制的路径继续绘制
在Canvas上绘制路径时，如果图片在可拖动时出现问题，可能是以下原因：
图片的大小或尺寸设置不正确：如果你的图片大小或尺寸设置不正确，Canvas可能无法正确地绘制路径。
图片没有被正确导入：如果你的图片没有被正确导入，Canvas可能无法获取到正确的图片信息。
代码中的绘图方法有误：在Canvas上绘制路径，通常需要使用Canvas的drawPath()方法。如果你的代码中有误，可能会导致路径绘制失败。
框架设置问题：如果你的项目使用了某种框架（如React、Vue等），并且设置了某种动画（如过渡效果），那么这些动画可能会影响到路径的绘制。
为了解决这些问题，你可以在代码中添加一些调试信息，如检查图片的大小和尺寸、检查图片是否已经被正确导入、检查代码中的绘图方法和框架设置等。如果仍然无法解决问题，可能需要寻求专业人士的帮助。
