canvas绘画板的实现（canvas画布）

新项目有一个需求：客户需要在订单确认的时候签名。

第一反应就是用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");
        Pic = 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);

ok，结束，下班~~

源码地址：canvas.rar