问可拖动对象和画布循环

EN

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

var isDown=false;
var startX,startY;

ctx.lineWidth=0.50;
ctx.strokeStyle='lightgray';
ctx.fillStyle='white';

// vars for icons, etc
var tbar={width:cw,height:35}
var tw=30;
var th=30;
var dragging=null;
var dropped=[];
var icons=[
  {name:'Flower',x:tw*0,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/flower.png'},
  {name:'Star',x:tw*1,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/star.png'},
  {name:'Plane',x:tw*2,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/plane2.png'},
  {name:'Mario',x:tw*3,y:2,url:'https://dl.dropboxusercontent.com/u/139992952/multple/marioStanding.png'},
];
  var thumbs=[];
var mainImg=new Image();
mainImg.crossOrigin='anonymous';
mainImg.onload=start;
mainImg.src='https://dl.dropboxusercontent.com/u/139992952/multple/husky.jpg';
var imgCount=icons.length+1;
for(var i=0;i<icons.length;i++){
  var icon=icons[i];
  icon.index=i;
  icon.img=new Image();
  icon.img.crossOrigin='anonymous';
  icon.img.onload=start;
  icon.img.src=icon.url;
}

// start is called when each image is fully loaded
function start(){
  // wait for all images to load
  if(--imgCount>0){return;}
  // create 
  for(var i=0;i<icons.length;i++){
    var icon=icons[i];
    thumbs.push(thumb(icon.img,tw,th));
  }
  // draw the toolbar & image
  draw();
  // listen for mouse events
  $("#canvas").mousedown(function(e){handleMouseDown(e);});
  $("#canvas").mousemove(function(e){handleMouseMove(e);});
  $("#canvas").mouseup(function(e){handleMouseUpOut(e);});
  $("#canvas").mouseout(function(e){handleMouseUpOut(e);});
}

// create thumbnails for each image (to be used as icons in the toolbar)
function thumb(img,w,h){
  var iw=img.width;
  var ih=img.height;
  var s=Math.min((w/iw),(h/ih))
  var c=document.createElement('canvas');
  c.width=iw*s;
  c.height=ih*s;
  c.getContext('2d').drawImage(img,0,0,iw,ih,0,0,iw*s,ih*s);
  return(c);
}

// draw the toolbar, image & any clone thumbnails added to the image
function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillRect(0,0,cw,tbar.height);
  ctx.strokeRect(0,0,cw,tbar.height);
  ctx.drawImage(mainImg,0,tbar.height);
  for(var i=0;i<icons.length;i++){
    var icon=icons[i];
    ctx.drawImage(thumbs[icon.index],icon.x,icon.y);
  }
  for(var i=0;i<dropped.length;i++){
    var icon=dropped[i];
    ctx.drawImage(thumbs[icon.thumbIndex],icon.x,icon.y);
  }
  if(dragging){
    ctx.drawImage(thumbs[dragging.thumbIndex],dragging.x,dragging.y);
  }
}

//
function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // get the mouse position
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);
  // hit test the toolbar icons and any dropped icons
  var mx=startX;
  var my=startY;
  // hit test toolbar icons
  if(mx>0 && mx<tw*icons.length && my>2 && my<2+tw){
    var icon=icons[parseInt(mx/tw)];
    dragging={thumbIndex:icon.index,x:icon.x,y:icon.y};
    dragging.source='icons';
    return;
  }
  // hit test dropped icons
  for(var i=0;i<dropped.length;i++){
    var icon=dropped[i];
    if(mx>icon.x && mx<icon.x+tw && my>icon.y && my<icon.y+th){
      dragging=dropped[i];
      dragging.source='dropped';
      dragging.droppedIndex=i;
      return;
    }
  }
}

// Add any 
function handleMouseUpOut(e){
  if(!dragging){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  //
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  // add the icon to its dropped position
  if(dragging.source=='icons'){
    if(dragging.y>tbar.height){
      dropped.push(dragging);
    }
    // remove the dropped icon if it's back in the toolbar
  }else if(dragging.y<tbar.height){
    dropped.splice(dragging.droppedIndex,1);
  }
  // clear dragging
  dragging=null;
  // redraw
  draw();
}

// move any icon that's being dragged
function handleMouseMove(e){
  if(!dragging){return;}
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();
  // get mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  // move the dragged icon by the distance the mouse
  // has moved since the last mousemove event
  var dx=mouseX-startX;
  var dy=mouseY-startY;
  startX=mouseX;
  startY=mouseY;
  dragging.x+=dx;
  dragging.y+=dy;
  // redraw
  draw();
}

// save just the image with dropped icons
$('#save').click(function(){
  var c=document.createElement('canvas');
  c.width=cw;
  c.height=ch-tbar.height;
  c.getContext('2d').drawImage(canvas,0,tbar.height,cw,ch-tbar.height,0,0,c.width,c.height);
  var img=new Image();
  img.onload=function(){
    document.body.appendChild(img);
  }
  img.src=c.toDataURL();
});

body{ background-color: ivory; }
#canvas{border:1px solid lightgray; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id='save'>Save</button>
<h4>Drag from top toolbar & icon will be drop-copied<br>Drag dropped icons around image<br>Drag dropped icon back to toolbar to delete.</h4>
<canvas id="canvas" width=300 height=300></canvas>