HTML5移动Canvas对象(HTML5 move Canvas object)

 我在同一个画布上创建了2个画布。 是否有可能拖拽小黑人呢？ 我想让它可拖动，但我找不到任何在线教程或演示。 可能吗？ 我曾经看过Canvas moveTo或transitions，但我无法使它工作。 
 
 代码在这里http://jsfiddle.net/35P9F/2/ 
 
  var ctx = document.getElementById('canvas').getContext('2d');

  var radgrad3 = ctx.createLinearGradient(255,10,0,180,80,190);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(1, 'red');

  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,255,255);



  var ctx4 = document.getElementById('canvas').getContext('2d');
  var radgrad4 = ctx4.createLinearGradient(0, 0, 0, 255);
  radgrad4.addColorStop(0, '#000000');
  radgrad4.addColorStop(1, '#ff0000');

  ctx4.fillStyle = radgrad4;
  ctx4.fillRect(0,0,25,25);
 
 谢谢。 

I have 2 canvas created on the same canvas. Is it possible to drag the small black one around? I want to make it draggable but I can not find any online tutorial or demo on this. Is it possible? I had looked to Canvas moveTo or transitions but I was unable to make it work.
 
The code is here http://jsfiddle.net/35P9F/2/
 
  var ctx = document.getElementById('canvas').getContext('2d');

  var radgrad3 = ctx.createLinearGradient(255,10,0,180,80,190);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(1, 'red');

  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,255,255);



  var ctx4 = document.getElementById('canvas').getContext('2d');
  var radgrad4 = ctx4.createLinearGradient(0, 0, 0, 255);
  radgrad4.addColorStop(0, '#000000');
  radgrad4.addColorStop(1, '#ff0000');

  ctx4.fillStyle = radgrad4;
  ctx4.fillRect(0,0,25,25);
 
Thank you.

原文：https://stackoverflow.com/questions/2720477