canvas画板pc

<div class="one">Canvas画板</div>
<canvas id="can" width="500" height="500"></canvas>

<script>
cc = document.getElementById('can');      
            ctx = cc.getContext('2d');   
           
        ctx.lineWidth = 5;    
        ctx.strokeStyle = 'blue';  
        cc.onmousedown = function(e){        
              
        var x = e.clientX -cc.offsetLeft;        
        var y = e.clientY -cc.offsetTop; 
        ctx.lineCap="round";
ctx.lineJoin="round";      
        ctx.moveTo(x,y);        
        cc.onmousemove = function(e){            
                   
        var x1 = e.clientX -cc.offsetLeft;            
        var y1= e.clientY -cc.offsetTop;           
        ctx.lineTo(x1,y1);            
        ctx.stroke();        
    };        
    cc.onmouseup = function(e){            
            cc.onmousemove = null;       
    };    
};


</script>