canvas版拖拽

<!DOCTYPE html>
<html>
<head>
<meta charset=”{CHARSET}”>
<title></title>
</head>
<body>
<canvas id=”box” width=”800″ height=”800″></canvas>
</body>
<script>
window.onload=function(){
var can=document.getElementById(‘box’),
gd=can.getContext(‘2d’),
x=0,
y=0,
w=100,
h=100;

gd.fillStyle=’red’;
gd.fillRect(x,y,w,h);
can.onmousedown=function(ev){
var ev=ev||window.event;
var downx=ev.clientX;
var downy=ev.clientY;
if( downx>x && downy<x+w && downy>y && downy<y+h){
var disx=downx-x;
var disy=downy-y;
can.onmousemove=function(ev){
var ev=ev||window.event;
x=ev.clientX-disx;
y=ev.clientY-disy;
gd.clearRect(0,0,can.width,can.height);
gd.fillRect(x,y,w,h);

}

can.onmouseup=function(){
can.onmousemove=null;
can.onmouseup=null;
}
return false
;
}
}

}
</script>
</html>

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » canvas版拖拽

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注