新專案有一個需求：客戶需要在訂單確認的時候簽名。

     第一反應就是用html的canvas實現，同事一起商量了下，canvas有三個制約：

• canvas必須要用滑鼠，簽名會很難看；
• 手機端web app怎麼實現簽名？
• 簽名好的canvas怎麼作為圖片提交到伺服器？

     糾結了一天，研究了下canvas，終於有了點眉目。先看看實際效果

  手機端的不好截圖，下面有原始碼可以下載。下面是原始碼截圖

 下面是app.js原始碼

    //動態設定canvas的大小  
    function resizeCanvas() {    
        $('#drawer').attr("width", $('.panel-body').width());    
        if(!$('.panel-body').height()){  
            $('#drawer').attr("height", $('.panel-body').height());  
        }else{  
            $('#drawer').attr("height", 300);  
        }  
            
    };    
      
    var canvas,board;  
    canvas = document.getElementById('drawer');  
    board = canvas.getContext('2d');  
      
    var mousePress = false;  
    var last = null;  
    //開始繪製  
    function beginDraw(){  
        mousePress = true;  
    }  
    //繪製  
    function drawing(event){  
        event.preventDefault();  
        if(!mousePress)return;  
        var xy = pos(event);  
        if(last!=null){  
      
            board.beginPath();  
            board.moveTo(last.x,last.y);  
            board.lineTo(xy.x,xy.y);  
            board.stroke();  
        }  
        last = xy;  
    }  
    //結束繪製  
    function endDraw(event){  
        mousePress = false;  
        event.preventDefault();  
        last = null;  
    }  
    //獲取位置  
    function pos(event){  
        var x,y;  
        if(isTouch(event)){  
            x = event.touches[0].pageX-event.target.offsetLeft;  
            y = event.touches[0].pageY-event.target.offsetTop;  
        }else{  
            x = event.offsetX;  
            y = event.offsetY;  
        }  
         return {x:x,y:y};  
    }  
      
    //檢測是touch還是mouse事件  
    function isTouch(event){  
        var type = event.type;  
        if(type.indexOf('touch')>=0){  
            return true;  
        }else{  
            return false;  
        }  
    }  
      
    //清除軌跡    
    function clearArea() {  
        board.setTransform(1, 0, 0, 1, 0, 0);  
        board.clearRect(0, 0, board.canvas.width, board.canvas.height);  
    }   
    //轉換成圖片顯示  
    function convertCanvasToImage() {  
        var image = canvas.toDataURL("image/png");   
        $('#image').html("<img src='"+image+"' alt='from canvas'/>");  
    }  
      
    //生成圖片並上傳到伺服器  
    function UploadPic() {         
        var Pic = canvas.toDataURL("image/png");  
        PicPic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")  
       
        $.ajax({  
            type: 'POST',  
            url: 'url',  
            data: '{ "imageData" : "' + Pic + '" }',  
            contentType: 'application/json; charset=utf-8',  
            dataType: 'json',  
            success: function (msg) {  
                console.log("圖片上傳成功");  
            },  
            error: function(msg) {  
                alert("需要伺服器資源");  
            }  
        });  
    }          
      
    board.lineWidth = 2;  
    board.strokeStyle="#000";  
    board.lineJoin = "round";  
    canvas.onmousedown = beginDraw;  
    canvas.onmousemove = drawing;  
    canvas.onmouseup = endDraw;  
    canvas.addEventListener('touchstart',beginDraw,false);  
    canvas.addEventListener('touchmove',drawing,false);  
    canvas.addEventListener('touchend',endDraw,false);