页面主要代码: 
 
<canvas id="imageCanvas" ></canvas>
 javascript主要代码:
 
复制代码
 1  
 2 var canvas=$("#imageCanvas").get(0);
 3 var context=canvas.getContext("2d");
 4 var oldX,oldY,newX,newY;
 5 var enabled=false;
 6 canvas.onmousedown=function(event){
 7      enabled=true;
 8     oldX = event.clientX;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
 9     oldY = event.clientY;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
10      
11 };
12 canvas.onmouseup=function(event) {
13      enabled = false;
14 };
15 canvas.onmousemove=function(event) {
16     if (!enabled) {
17         return;
18     }
19     newX=event.clientX;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientX
20     newY=event.clientY;//实际运用中要获取鼠标在元素中的相对位置,在此为了方便直接获取了event的clientY
21     moveImage();
22     oldX=newX;
23     oldY=newY;
24 };
25 function moveImage(){
26     var moveX=(newX - oldX);
27     var moveY=(newY - oldY);
28     
29     
30     //图像移动
31     context.transform(1,0,0,1,moveX,moveY);
32     context.drawImage(image);
33 
34 }