canvas简单画图板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<script src="jQuery-HY-1.0.1.js"></script>
<input id="inp1" type="color">
<input id="inp2" type="range" value="1" min="1" max="40">
<button>橡皮</button>
<canvas width="400" height="400"></canvas>
<script>
    var inp1=document.getElementById("inp1");
    var inp2=document.getElementById("inp2");
    var can=document.getElementsByTagName("canvas")[0];
    var btn=document.getElementsByTagName("button")[0];
    var ctx=can.getContext("2d");
    inp1.onchange=function(){
        ctx.strokeStyle=this.value;
    }
    inp2.onchange=function(){
        ctx.lineWidth=this.value;
    }
    btn.onclick=function(){
        ctx.clearRect(0,0,1000,400);
    }
    can.onmousedown=function(event){
        event=event||window.event;
        var movex=getPageXY(event).x-can.offsetLeft;
        var movey=getPageXY(event).y-can.offsetTop;
        ctx.lineCap="round";
        ctx.beginPath();
        ctx.moveTo(movex,movey);
        document.onmousemove=function(event){
            event=event||window.event;
            var endx=getPageXY(event).x-can.offsetLeft;
            var endy=getPageXY(event).y-can.offsetTop;
            ctx.lineTo(endx,endy);
            ctx.stroke();
        }
    }
    document.onmouseup=function(){
        document.onmousemove=null;
    }
</script>
</body>
</html>