Javascript HTML5画布显示和拖动图像

基本上我已经创建了内部透明的形状图像，这样当另一个图像显示在透明部分时

我已经成功地显示了这些形状，但我不知道如何拖动它们。 因此，我想先单击按钮，然后只想在图案周围拖动（如果可能的话，调整大小）

以下是我目前的代码：

函数显示（）
{
函数形状（）{
如果（document.getElementById（'shape2'）.checked）{
var canvas=document.getElementById（'shape'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src=http://image.flaticon.com/icons/png/512/33/33848.png';
}
}
函数模式（）{
如果（document.getElementById（'pat1'）.checked）{
var canvas=document.getElementById（'pattern'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTw_LgFWAcL6RzFH4EApgo69TX7xx6iUyPqLANgi5qdJ6QL9CY';
}
if（document.getElementById（'pat2'）。选中）{
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src=http://img.freepik.com/free-vector/abstract-geometric-pattern_23-2147508597.jpg?size=338&ext=jpg';
}
var canvas=document.getElementById（'pattern'）；
var context=canvas.getContext（'2d'）；
var canvasOffset=$（“#模式”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
var IsDraging=错误；
功能手柄向下（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
IsDraging=true；
}
功能handleMouseUp（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
IsDraging=错误；
}
函数handleMouseOut（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
}
功能手柄移动（e）{
canMouseX=parseInt（e.clientX-offsetX）；
canMouseY=parseInt（e.clientY-offsetY）；
if（ISDRAGING）{
ctx.clearRect（0,0，画布宽度，画布高度）；
ctx.drawImage（img，canMouseX-128/2，canMouseY-120/2128120）；
}
}
$（“#模式”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#模式”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#模式”）.mouseup（函数（e）{handleMouseUp（e）；}）；
$（“#模式”）.mouseout（函数（e）{handleMouseOut（e）；}）；
}
}
形状（）；
模式（）；
}

选择形状：
矩形


选择模式：
绿波
灰色瓷砖


显示：

我不太明白你的问题

但是你的代码似乎不起作用

由于

show（）

仅在更换收音机时触发

你不应该在里面写你的鼠标事件

然后将事件绑定到比

#shape

更低的层上的

#pattern

它永远不会被访问

我试着稍微修改一下你的代码

如果你觉得有点道理，你可以去看看

函数显示（）{
函数形状（）{
if（document.getElementById（'shape2'）。选中）{
var canvas=document.getElementById（'shape'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src=http://image.flaticon.com/icons/png/512/33/33848.png';
}
}
函数模式（）{
if（document.getElementById（'pat1'）。选中）{
var canvas=document.getElementById（'pattern'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src=https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTw_LgFWAcL6RzFH4EApgo69TX7xx6iUyPqLANgi5qdJ6QL9CY';
}
if（document.getElementById（'pat2'）。选中）{
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，0,0）；
};
imageObj.src=http://img.freepik.com/free-vector/abstract-geometric-pattern_23-2147508597.jpg?size=338&ext=jpg';
}
//您可能希望将这些变量移到外部
var canvas=document.getElementById（'pattern'）；
var context=canvas.getContext（'2d'）；
var canvasOffset=$（“#模式”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
var IsDraging=错误；
}
形状（）；
模式（）；
}
//您可以在此处尝试实现您想要的鼠标事件
$（'#shape'）.on（'mousedown mousemove mouseup mouseout'，function（）{}）
.on（'mousedown'，function（）{
console.log（'down'）；
})
.on（'mousemove'，function（）{
console.log（'move'）；
})
.on（'mouseup'，function（）{
console.log（'up'）；
})
.on（'mouseout'，function（）{
console.log（'out'）；
})
//我把内嵌函数移到了这里
var radio=document.querySelectorAll（'input'）；
对于（var i=0；i

矩形

选择模式：
绿波
灰色瓷砖

显示：

谢谢，如果我能够拖动图案的图像，如何应用此功能？