首页 > 代码库 > 简单画板
简单画板
刚学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>
简单画板
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。