Html5 Canvas 拖拽效果

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);
}

上一篇: Mysql Limit 优化，百万至千万级快速分页 复合索引

下一篇: 基于Comet服务器推技术

评论