canvas拖动图片

来源：互联网发布：软件和信息技术服务编辑：程序博客网时间：2024/06/05 18:58

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/demo/base.css">
<meta charset="utf-8" />
<title>简单的HTML5 Canvas拖动效果 - HTML51.COM</title>

<script type="text/javascript">

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 canvasMouseDownHandler(event){
var canvasMouseX=event.layerX;
if(!canvasMouseX){
canvasMouseX=event.x;
}
var canvasMouseY=event.layerY;
if(!canvasMouseY){
canvasMouseY=event.y;
}

if(canvasMouseX>currentRectX&&canvasMouseX<currentRectX+RECT_WIDTH&&canvasMouseY>currentRectY&&canvasMouseY<currentRectY+RECT_HEIGHT){
mainCanvas.onmousemove=canvasMouseMoveHandler;

startDragMouseX=canvasMouseX;
startDragMouseY=canvasMouseY;
startDragRectX=currentRectX;
startDragRectY=currentRectY;
}
}

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

</script>
</head>
<body onload="pageInit();">
<script src="/demo/page.js"></script>
</body>
</html>