码迷,mamicode.com
首页 > 其他好文 > 详细

简单画板

时间:2014-08-29 12:33:17      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   ar   div   cti   

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

 

简单画板

标签:des   style   blog   http   color   io   ar   div   cti   

原文地址:http://www.cnblogs.com/JerryWang24/p/3944452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!