canvas拖拽效果

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>