简单画板

刚学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>

 

你可能感兴趣的:(简单)