javascript 怎么把多幅图片画进canvas中，并且能拖动他们，给他们连线
canvas不可以拖动。你也不可以直接拖动canvas里面的任何元素，包括已经载入的图片（实际上图片已经成为canvas的一部分）。先不说连线，因为我不清楚你要怎样连线。先拿一张图片来说。
思路：canvas不可以拖动，但div可以啊。考虑div和canvas。位置属性设置为absolute，否则容易出错。
注意：将div的z-index值设置大点，保证其在Canvas画面之上。
将div的大小设置成图片的大小。
图片不是在div里面，也没必要。
拖动div，拖动到新位置X1,Y1时，清除canvas的图片：ctx.clearRect(X,Y,W,H);X是上一个位置图片在canvas中的横坐标，Y是上一个位置的纵坐标，W是图片宽度，H是图片高度。
绘制新位置下的图片：ctx.drawImage(img,X,Y);img是一个图片节点。不会用drawImage请百度哈。
【【【具体代码：】】】
div拖动：
var divObj=document.getElementById("cover");
var moveFlag=false;
divObj.onmousedown=function(e){
moveFlag=true;
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetLeft;
var mheight=clickEvent.clientY-divObj.offsetTop;
document.onmousemove=function(e){
var moveEvent=window.event||e;
if(moveFlag){
divObj.style.left=moveEvent.clientX-mwidth+"px";
divObj.style.top=moveEvent.clientY-mheight+"px";
divObj.onmouseup=function(){
moveFlag=false;
}
}
}
};来解读下这段代码：首先获取div对象，设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动，当onmouseup时为false表示不能拖动了。
var clickEvent=window.event||e;
var mwidth=clickEvent.clientX-divObj.offsetLeft;
var mheight=clickEvent.clientY-divObj.offsetTop;
这三行代码是为了修正光标位置。当点击时，记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。
接下来绘制图片：
首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。
var ctx=document.getElementById("myCanvas").getContext("2d");
var img=document.getElementById("myImg");
function drawImg(){
ctx.clearRect(0,0,1000,500);
ctx.beginPath();
ctx.drawImage(img,X,Y);
ctx.closePath();
ctx.stroke();
}
window.onload=function(){
setInterval(drawImg,1);
}获取“画笔”，获取图片对象。这里setInterval循环执行绘制图片的函数，以刷新图片的位置，setInterval的间隔值越小，拖拽起来越“流畅”。
同时别忘了clearRect，当图片移动到下一个位置时，清除上一个位置的图片，参数为Canvas画布的坐标和尺寸。
在拖拽时将修正后的光标坐标传给X、Y：
X=moveEvent.clientX-mwidth;
Y=moveEvent.clientY-mheight;
最后加上div和图像的活动范围：
if(moveEvent.clientX<=mwidth){
divObj.style.left=0+"px";
X=0;
}
if(parseInt(divObj.style.left)+divObj.offsetWidth >=1000){
divObj.style.left=1000 - divObj.offsetWidth+"px";
X=1000 - divObj.offsetWidth;
}
if(moveEvent.clientY<=mheight){
divObj.style.top=0+"px";
Y=0;
}
if(parseInt(divObj.style.top)+divObj.offsetHeight>=500){
divObj.style.top=500-divObj.offsetHeight+"px";
Y=500-divObj.offsetHeight;
}这个就看个人的要求了，注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小，如果是在整个页面里活动就换成innerWidth或innerHeight。
彻底隐藏div看看效果：
最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。
这里有个比较简单的办法，定义一个clickFlag默认为false,当onmousedown时设为true，若进行了onmousemove事件时设为false。
在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。
