<canvas id="can" width="400" height="400"></canvas>
 <script type="text/javascript">
 var can = document.getElementById("can");
 var ctx = can.getContext("2d");
 //創(chuàng)建圓滑塊
 function createBlock(a,b){
 ctx.beginPath();
 ctx.fillStyle = "red";
 ctx.arc(a,b,30,0,Math.PI*2);
 ctx.fill();
 }
 //鼠標按下，將鼠標按下坐標保存在x,y中
 createBlock(50,50);
 can.onmousedown = function(ev){
 var e = ev||event;
 var x = e.clientX;
 var y = e.clientY;
 drag(x,y);
 };
 //拖拽函數(shù)
 function drag(x,y){
 // 按下鼠標判斷鼠標位置是否在圓上，當畫布上有多個路徑時，isPointInPath只能判斷最后那一個繪制的路徑
 if(ctx.isPointInPath(x,y)){
 //路徑正確，鼠標移動事件
 can.onmousemove = function(ev){
  var e = ev||event;
  var ax = e.clientX;
  var ay = e.clientY;
  //鼠標移動每一幀都清楚畫布內容，然后重新畫圓
  ctx.clearRect(0,0,can.width,can.height);
  createBlock(ax,ay);
 };
 //鼠標移開事件
 can.onmouseup = function(){
  can.onmousemove = null;
  can.onmouseup = null;
 };
 };
 }
</script>