Javascript HTML5画布多个图像

我在一个网页上有两个画布，每个画布加载不同的图像。当我点击一个图像时，我希望能够拖放它。我已经这样做了，但是当我点击时，如何检测我使用的画布呢

因为只有前面的图像才会移动。是否有方法检测或检查正在绘制的活动画布或图像

我做了很多事，如果能帮上忙就好了

#第1层，第2层
{
边框：1px纯黑；
宽度：500px；
高度：500px；
} 
如果您的浏览器不支持HTML5画布，则会显示此文本。
如果您的浏览器不支持HTML5画布，则会显示此文本。
var半径=10；
功能鼠标点击（e）
{
}
功能鼠标向下（e）
{
}
函数mouseMove（e）
{
if（window.event.which==1）//鼠标左键
{
g、 beginPath（）；
g、 弧（e.x，e.y，半径，0，数学PI*2）；
g、 填充（）；
g、 closePath（）；
}
}
//基本设置稍后使用
//全球的
//*******************************************
var canvas，canvas2；
var g，g2；
var img=新图像（）；
var img2=新图像（）；
//*******************************************
//*******************************************
//可拖动图像的全局
变量大小=100；
var x=250；
变量y=250；
//********************************************
//启动
//启动画布
//*******************************************
初始值（500500）；
加载图像（“https://pbs.twimg.com/profile_images/604644048/sign051.gif",img,190,80150,150,g),；
加载图像（“http://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg，img2，x-（大小/2），y-（大小/2），大小，大小，g2）；
附件（）；
//连接鼠标滚轮
//window.onmouseheel=document.onmouseheel=mymouseheel函数；
函数initCanvas（w，h）
{
/*获取画布id*/
canvas=document.getElementById（“layer1”）；
canvas2=document.getElementById（“layer2”）；
/*给画布一个宽度和高度*/
/*宽度和高度以画布逻辑单位表示*/
画布宽度=w；
canvas.height=h；
canvas2.width=w；
canvas2.height=h；
/*为画布指定一个图形上下文，以便我们可以在其上绘制*/
g=canvas.getContext（“2d”）；
g2=canvas2.getContext（“2d”）；
}
函数loadImage（myImageURL、imgObject、x、y、宽度、高度、图形）
{
imgObject.src=myImageURL；//“dkit.gif”；
imgObject.onload=函数（）
{
/*代码的其余部分将绘制到图形上下文中*/
//g、 drawImage（img，0，0，canvas.width，canvas.height）；
//可拖动码，中心图像在中间小
//绘图图像（img、x、y、宽度、高度）；
//g、 drawImage（图像对象，x-（大小/2），y-（大小/2），大小，大小）；
图形.绘图图像（imgObject，x，y，宽度，高度）；
//imgObject.addEventListener（'click'，btnClick（“loadImage 1”）；
}
}
功能BTN单击（sMessage）
{   
警报（sMessage）；
}
函数attachEvents（）
{
//将函数附加到鼠标单击侦听器
//addEventListener（'click'，getImageObject）；
//鼠标移动事件
canvas.addEventListener（'mousemove'，dragImageonClick）；
canvas2.addEventListener（'mousemove'，dragImageonClick）；
//图像事件
//img.addEventListener（“单击”，b单击（“1”）；
//img2.addEventListener（“单击”，b单击（“2”）；
}
函数myMouseWheelFunction（e）
{
unitChange=e.wheelDelta/120；//unitChange将等于+1或-1
//使用unitChange值的代码位于下面
警报（“鼠标滚动”）；
}
/*
//在用户单击的位置绘制图像
函数paintImageonClick（e）
{
if（window.event.which==1）//鼠标左键
{
g、 clearRect（0，0，canvas.width，canvas.height）；
g、 绘图图像（img，e.x-50，e.y-50100100）；
}
}
*/
函数getImageObject（e）
{
控制台日志（e）；
}
//允许图像可拖动
函数dragImageonClick（e）
{
if（window.event.which==1）//鼠标左键
{
if（mouseisindeimage（e））
{
g、 clearRect（0，0，canvas.width，canvas.height）；
g2.clearRect（0,0，canvas2.width，canvas2.height）；
//这里的问题是如何知道用户单击的图像
//**********************************************************************************
g、 绘图图像（img，x-（尺寸/2），y-（尺寸/2），尺寸，尺寸）；
g2.绘图图像（img2，x-（尺寸/2），y-（尺寸/2），尺寸，尺寸）；
//**********************************************************************************
x=e.x；
y=e.y；
}
}
}
//可拖动辅助函数
函数mouseisindeimage（e）
{
//x
如果（e.x>x）
{
如果（（e.x-x）>（尺寸/2））
{
返回false；
}
}
else//x>=e.x
{
如果（（x-e.x）>（尺寸/2））
{
返回false；
}
}
//y
如果（e.y>y）
{
如果（（e.y-y）>（尺寸/2））
{
返回false；
}
}
else//y>=e.y
{
如果（（y-e.y）>（尺寸/2））
{
返回false；
}
}   
返回true；
}
//我不知道这有什么用
/*
img.onload=函数（）
{
g、 绘图图像（img，x-（尺寸/2），y-（尺寸/2），尺寸，尺寸）；
}
*/

要了解您单击的画布，您可以使用：

e.currentTarget.id

这将获取画布的

id

e.currentTarget.id