zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    缓存更新的套路
    return 和 return false 的区别
    TensorFlow函数:tf.truncated_normal
    TensorFlow随机值:tf.random_normal函数
    TensorFlow函数:tf.lin_space
    TensorFlow函数:tf.ones_like
    TensorFlow函数:tf.ones
    TensorFlow函数:tf.zeros_like
    Tensorflow函数:tf.zeros
    数据分析常用的python工具和SQL语句
  • 原文地址:https://www.cnblogs.com/anxiaoyu/p/6834382.html
Copyright © 2011-2022 走看看