HTML 5-canvasドラッグ、移動描画画像操作移動、ドラッグ

            ！


    var beginX=10;
    var beginY=10;
    var w = 60;
    var h = 30;
    var zindexX,zindexY;
    var arr = [['  ', '  ', '  '],['1', '  ', ' '],['2', '  ', ' ']]
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.font="16px Georgia";

    // cxt.scale(0.5,0.5);
    var lineX,lineY
    //  
    function createBlock(x,y){
        cxt.beginPath();
        for(l=1;l<=arr.length;l++){
            var child = arr[l-1]
            for(r=1;r<=child.length;r++){
                a=x+(r-1)*w;
                b=y+(l-1)*h;
                x_zuobiao=a+10;
                y_zuobiao=b+10;
                lineX = a+w
                lineY = b-h/2
                cxt.rect(a,b,w,h);
                cxt.fillText(child[r-1],x_zuobiao,b+(h/2)+5);
                cxt.strokeStyle = '#000000';
                cxt.stroke();
            };
            cxt.strokeStyle = '#000000';
            cxt.stroke();
        };

        for(l=1;l<=arr.length;l++){
            var child = arr[l-1]
            for(r=1;r<=child.length;r++){
                a=x+(r-1)*w+300;
                b=y+(l-1)*h;
                x_zuobiao=a+10;
                y_zuobiao=b+10;
                cxt.rect(a,b,w,h);
                cxt.fillText(child[r-1],x_zuobiao,b+(h/2)+5);
                cxt.strokeStyle = '#000000';
                cxt.stroke();
            };
            cxt.strokeStyle = '#000000';
            cxt.stroke();
        };
        cxt.stroke();
        cxt.strokeStyle = 'green';
        cxt.moveTo(lineX,lineY);
        cxt.lineTo(lineX+20,lineY);
        cxt.lineTo(lineX+300-3*w-20,lineY+30);
        cxt.lineTo(lineX+300-3*w,lineY+30);
        cxt.stroke();
    };
    
    //    ，          x,y 
    createBlock(50,50);
    c.onmousedown = function(ev){
        var e = ev||event;
        var x = e.layerX;
        var y = e.layerY;
        drag(x,y,cxt,c);
    };

    //    
    function drag(x,y,cxt,c){
        if(cxt.isPointInPath(x,y)){
            //    ，      
            c.onmousemove = function(ev){
                var e = ev||event;
                var ax = e.layerX;
                var ay = e.layerY;
                //              ，      
                cxt.clearRect(0,0,c.width,c.height);
                // cxt.translate(25,25);
                cxt.restore()
                createBlock(ax,ay);

            };
            //      
            c.onmouseup = function(){
                c.onmousemove = null;
                c.onmouseup = null;
            };
        };
    };

  function onMouseWheel(ev) { /*          ，      */
    var ev = ev || window.event;
    var down = true; //       ，       ，      
    per = 1;
    down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
    if (down) {
      per += 0.05;
    } else {
      per -= 0.05;
    }
    zindexX = (ev.layerX)*(1-1/parseFloat(per));
    zindexY = (ev.layerY)*(1-1/parseFloat(per));
    cxt.scale(parseFloat(per),parseFloat(per));
    cxt.clearRect(zindexX,zindexY,c.width,c.height);
     createBlock(ev.clientX/2,ev.clientY/2);
    if (ev.preventDefault) { /*FF   Chrome*/
      ev.preventDefault(); //       
    }
    return false;
  }
  addEvent(c, 'mousewheel', onMouseWheel);
  addEvent(c, 'DOMMouseScroll', onMouseWheel);
  function addEvent(obj, xEvent, fn) {
  if (obj.attachEvent) {
    obj.attachEvent('on' + xEvent, fn);
  } else {
    obj.addEventListener(xEvent, fn, false);
  }
}