[canvas入坑1]canvas 画布拖拽效果

查看效果请到 http://philippica.github.io/  点击drag

和上一篇画图很像，所以有些部分做了省略

当鼠标按下时保存当前画布上的内容到ppImgData中,并且记录下初始点的位置,当鼠标移动时调用ppDrag函数

     $('#myCanvas').unbind();
     $('#myCanvas').mousemove(function(e)
     {
         if(ppMousePressed)
         {
             var mouseX = e.pageX - this.offsetLeft;
             var mouseY = e.pageY - this.offsetTop;
             context.clearRect(0, 0, ppCanvasWidth, ppCanvasHeight);//清屏
             ppDrag(mouseX, mouseY);
         }
     });
     $('#myCanvas').mousedown(function(e)
     {
         if(e.which == 1)//茹果是左键
         {
             ppMousePressed = true;
             ppImgData = context.getImageData(0, 0, ppCanvasWidth, ppCanvasHeight);//保存当前画布
             var mouseX = e.pageX - this.offsetLeft;
             var mouseY = e.pageY - this.offsetTop;
             ppInitialPoint = new ppPoint(mouseX, mouseY);//记录鼠标初始位置
         }
     });
     $(window).mouseup(function(e){
         ppMousePressed = false;
     });

所以关键就是ppDrag怎么写

然后也挺简单的,putImageData函数的后两个参数是画出图像的左上角坐标,然后就可以根据鼠标的初始位置、鼠标当前位置计算（其实就是做个差）出当前应该画的位置了

 function ppDrag(curX, curY)
 {
     var dX = curX - ppInitialPoint.x;
     var dY = curY - ppInitialPoint.y;
     console.info(dX+" "+dY);
     context.putImageData(ppImgData, dX, dY);
 }