canvasn拖拽效果

Posted 2020-09-17 安筱雨

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>