刚学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{ /* 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>