本文转载在http://bbs.blueidea.com/thread-2979405-1-1.html
哈哈哈，好骚气！终于解决了我的需求。可以移动canvas内的多个元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
var list=[];
var currentC;
var _e={};
var cricle = function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.isCurrent=false;
this.drawC=function(ctx,x,y){
ctx.save();
ctx.beginPath();
ctx.moveTo(this.x,this.y-this.r);
ctx.arc(this.x,this.y,this.r,*Math.PI,,true);
if ((x && y && ctx.isPointInPath(x, y) && !currentC )||this.isCurrent) { ctx.fillStyle = '#ff0000';
currentC=this;
this.isCurrent=true; }else{
ctx.fillStyle = '#999999';
}
ctx.fill();
} }
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=;i<;i++){
var c=new cricle(*i,*i,*i);
c.drawC(ctx);
list.push(c);
}
}
} function reDraw(e){
e=e||event;
var canvas = document.getElementById('tutorial');
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop; canvas.width = canvas.width;
if (canvas.getContext){
var ctx = canvas.getContext('2d');
for(var i=;i<list.length;i++){
var c=list[i];
c.drawC(ctx,x,y); }
} } function show(e){
e=e||event;
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop; if(currentC){
currentC.x=parseInt(x+(x-currentC.x)/);
currentC.y=parseInt(y+(y-currentC.y)/);
}
_e=e; } window.onload=function(){ var canvas = document.getElementById('tutorial');
draw(); canvas.onmousedown=function(e){
e=e||event;
var x = e.clientX - canvas.offsetLeft;
var y = e.clientY - canvas.offsetTop;
if(currentC)
currentC.isCurrent=false;
currentC=null;
reDraw(e);
_e=e;
var showTimer=setInterval(function(e){
reDraw(e);
},,_e);
canvas.onmousemove=show; document.onmouseup=function(){
if(currentC)
currentC.isCurrent=false;
currentC=null;
canvas.onmousemove=null;
clearInterval(showTimer);
} }
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body style="background:#eeeeee;">
<div style="background:#0f0;width:100px;height:100px;position:absolute;left:100px;top:100px;z-index:1;" onclick="alert(1);"></div>
<canvas id="tutorial" width="" height="" style="z-index:100;display:block;position:absolute;"></canvas> </body>
<script> </script>
</html>