canvas拖拽和平時用的js拖拽是有區別的

普通的js是設置目標為絕對定位，再根據鼠標的移動來改變left和top的值

canvas是獲得了鼠標的位置，直接在目標點進行重新繪制

下面給一個簡單的拖拽代碼

<canvas id="can" width="400" height="400"></canvas>  
    <script type="text/javascript">  
        var can = document.getElementById("can");  
        var ctx = can.getContext("2d");  

        //初始化一個圓
        createBlock(50,50);  
        //創建圓滑塊  
        function createBlock(a,b){  
            ctx.beginPath();  
            ctx.fillStyle = "red";  
            ctx.arc(a,b,30,0,Math.PI*2);  
            ctx.fill();  
        }  
        //鼠標按下，將鼠標按下坐標保存在x,y中  
        
        can.onmousedown = function(ev){  
            var e = ev||event;  
            var x = e.clientX;  
            var y = e.clientY;  
            drag(x,y);  
        };  
        //拖拽函數  
        function drag(x,y){  
            // 按下鼠標判斷鼠標位置是否在圓上，當畫布上有多個路徑時，isPointInPath只能判斷最後那一個繪制的路徑  
            // sPointInPath判斷點是不是在路徑中
            // 如果鼠標的坐標x,y是在圓上，則拖動
            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>

canvasn拖拽效果