当我噼里啪啦把代码写完在电脑端调试好后，上线约测试下，喵了个咪，不管怎么，手指移动线条就是对不上，我的手指监听事件如下：

 $('#bgd').on('touchstart',function(e) {
        //防止非画画的用户点击
           if(!start){
            return;
        }
        var offset = $(this).offset(); //DIV在页面的位置
        var x = offset.left; //获得鼠标指针离DIV元素左边界的距离
        var y = offset.top; //获得鼠标指针离DIV元素上边界的距离
        $('#bgd').on('touchmove',function(ev) {
            ing=1;
            //这里需要对快照数量进行重置
            snapshot_num=snapshot.length;
            var _touch = ev.originalEvent.targetTouches[0];
            var _x= _touch.pageX-x;
            var _y= _touch.pageY-y;
            stroke(_x,_y);
        });
    });

发现移动端完全不行啊，什么妖魔鬼怪的画法，明明按到右边，线条却在左边，后面发现：触摸时浏览器有个默认的事件，这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();

真他喵让人崩溃！搞了好久，加上后就完美了！

//手指移动
    $('#bgd').on('touchstart',function(e) {
        e.preventDefault();
        //防止非画画的用户点击
           if(!start){
            return;
        }
        var offset = $(this).offset(); //DIV在页面的位置
        var x = offset.left; //获得鼠标指针离DIV元素左边界的距离
        var y = offset.top; //获得鼠标指针离DIV元素上边界的距离
        $('#bgd').on('touchmove',function(ev) {
            ev.preventDefault();
            ing=1;
            //这里需要对快照数量进行重置
            snapshot_num=snapshot.length;
            var _touch = ev.originalEvent.targetTouches[0];
            var _x= _touch.pageX-x;
            var _y= _touch.pageY-y;
            stroke(_x,_y);
        });
    });
    //手指移开
    $('#bgd').on('touchend',function(e) {
           if(!start){
                return;
            }
    $("#bgd").unbind("touchmove");
        if(ing==1){
             saveImg();
        }
        ing=0;
    });

欢迎大家访问测试：https://chat.suibibk.com/guess