Canvas拖拽效果

var mainCanvas; var mainCt; var MAIN_CANVAS_WIDTH=680; var MAIN_CANVAS_HEIGHT=560; var currentRectX=100; var currentRectY=100; var startDragRectX=0; var startDragRectY=0; var startDragMouseX=0; var startDragMouseY=0; var RECT_WIDTH=100; var RECT_HEIGHT=100; function pageInit(){ mainCanvas=document.createElement("canvas"); mainCanvas.width=MAIN_CANVAS_WIDTH; mainCanvas.height=MAIN_CANVAS_HEIGHT; document.body.appendChild(mainCanvas); mainCanvas.onmousedown=canvasMouseDownHandler; mainCanvas.onmouseup=canvasMouseUpHandler; mainCt=mainCanvas.getContext("2d"); redrawRect(); } function canvasMouseMoveHandler(event){ var canvasMouseX=event.layerX; if(!canvasMouseX){ canvasMouseX=event.x; } var canvasMouseY=event.layerY; if(!canvasMouseY){ canvasMouseY=event.y; } currentRectX=startDragRectX+canvasMouseX-startDragMouseX; currentRectY=startDragRectY+canvasMouseY-startDragMouseY; redrawRect(); } function canvasMouseUpHandler(event){ mainCanvas.onmousemove=null; } function redrawRect(){ mainCt.clearRect(0,0,MAIN_CANVAS_WIDTH,MAIN_CANVAS_HEIGHT); mainCt.fillStyle="#0000FF"; mainCt.fillRect(currentRectX,currentRectY,RECT_WIDTH,RECT_HEIGHT); }