html代码

       <canvas id="myCanvas" style="border:1px solid silver"></canvas>
        <div>
            <button onclick="clean();">清 空</button>
            <button onclick="save();">生成图片</button>
        </div>
        <img id='img' alt='请涂鸦……'/>
        <textarea id="log" cols="30" rows="5"></textarea>

javascript代码

var canvas,board,img;
            canvas = document.getElementById('myCanvas');
            img= document.getElementById('img');
            
            canvas.height = 800;
            canvas.width = 800;
            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;
                    y = event.touches[0].pageY;
                }else{
                    x = event.offsetX+event.target.offsetLeft;
                    y = event.offsetY+event.target.offsetTop;
                }
//               log('x='+x+' y='+y);
                return {x:x,y:y};
            }
            
            function log(msg){
                var log = document.getElementById('log');
                var val = log.value;
                log.value = msg+'\n'+val;                
            }
            
            function isTouch(event){
                var type = event.type;
                if(type.indexOf('touch')>=0){
                    return true;
                }else{
                    return false;
                }
            }
            
            function save(){
                //base64
                var dataUrl = canvas.toDataURL();
//                dataUrl = dataUrl.replace("image/png", "image/octet-stream");
                img.src = dataUrl;
            }
            
            
            function clean(){
                board.clearRect(0,0,canvas.width,canvas.height);
            }
             
            board.lineWidth = 1;
            board.strokeStyle="#0000ff";
            
            
            canvas.onmousedown = beginDraw;
            canvas.onmousemove = drawing;
            canvas.onmouseup = endDraw;
            canvas.addEventListener('touchstart',beginDraw,false);
            canvas.addEventListener('touchmove',drawing,false);
            canvas.addEventListener('touchend',endDraw,false);