简单画板

刚学HTML5没多久，写了个简单画板，勿喷~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .color{
        padding: 10px;
    }
    #btnClear{
    /*    width: 50px;
        height: 20px;*/
        margin: 0 10px;
    }
    #con{
        background: #999;
    }
</style>
<script>
window.onload=function(){
    var oCon=document.getElementById('con');
    var cxt=oCon.getContext("2d");
var oBtn=document.getElementById('btnClear');
    oBtn.onclick=function(){
        cxt.clearRect(0, 0, 400, 400);
    }
    
    oCon.onmousedown=function(e){
        var oVal=document.getElementById('cVal').value;
        cxt.strokeStyle=oVal;
        var myX=e.layerX;
        var myY=e.layerY;
        cxt.beginPath();
        cxt.moveTo(myX, myY);
        document.onmousemove=function(e){
            var mX=e.layerX;
            var mY=e.layerY;
            cxt.lineTo(mX, mY);
            cxt.stroke();
        }
        document.onmouseup=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
}
</script>
</head>
<body>
    <div class="color">请选择画笔颜色：<input type="color" id="cVal"><button id="btnClear" >清除画板</button></div>
    <canvas id="con" width="400" height="400"></canvas>
</body>
</html>

 

posted @ 2014-08-29 10:55  Jerry24  阅读(198)  评论(0)  编辑  收藏  举报