<!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.οnmοusedοwn=canvasMouseDownHandler;
mainCanvas.οnmοuseup=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.οnmοusemοve=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.οnmοusemοve=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 οnlοad="pageInit();">
<script src="/demo/page.js"></script>
</body>
</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.οnmοusedοwn=canvasMouseDownHandler;
mainCanvas.οnmοuseup=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.οnmοusemοve=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.οnmοusemοve=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 οnlοad="pageInit();">
<script src="/demo/page.js"></script>
</body>
</html>