如何实现Canvas图像的拖拽、点击等操作

希望能对Canvas绘制出来的图像进行点击、拖拽等操作，因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏，我也没玩过。

Canvas在我的理解中就好像在一张画布上绘制图像，它只能看到却“摸”不到，那要如何进行操作呢。我不知道网上是怎么做的，这里用自己的想法做了个DEMO分享给大家。

思路：

虽然Canvas不能拖拽，但div可以拖拽，那怎么把二者结合起来呢。初步想法是将一个与Canvas图像大小差不多的div覆盖在其上，在拖拽div时将获取的光标坐标修正后传给Canvas绘制函数并刷新图像的位置。

既然要覆盖，先做些准备工作：

1.将div与Canvas画布均position:absolute，否则无法重叠。

2.将div的z-index值设置大点，保证其在Canvas画面之上。

准备工作完成后，我们先来看div的拖拽：

    var divObj=document.getElementById("cover");
    var moveFlag=false;

        divObj.οnmοusedοwn=function(e){
        moveFlag=true;
        var clickEvent=window.event||e;
        var mwidth=clickEvent.clientX-divObj.offsetLeft;
        var mheight=clickEvent.clientY-divObj.offsetTop;
        document.οnmοusemοve=function(e){
            var moveEvent=window.event||e;
            if(moveFlag){
                divObj.style.left=moveEvent.clientX-mwidth+"px";
                divObj.style.top=moveEvent.clientY-mheight+"px";
                divObj.οnmοuseup=function(){
                    moveFlag=false;
                }
            }
        }
    };