本篇文章讲的是利用的canvas的一些属性制作一个简易的画板，由于本人的时间不足，以及能力也有限，所以功能比较简单，喜欢自己学习的同学有兴趣话可以自己加上一些功能。直接上代码了。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{margin: 0 auto;width: 600px;padding: 0;}</style></head><body><canvas id="canvas" style="display: block;margin: auto;border:3px solid red;background: #ccc;">不支持canvas，请升级浏览器！</canvas><div class="box"><input type="button" name="" value="清除画布" id="clear" /><input type="button" name="" value="红色画笔" id="red" /><input type="button" name="" value="蓝色画笔" id="blue" /><input type="button" name="" value="黑色画笔" id="black" /><input type="button" name="" value="紫色画笔" id="zise" /><input type="button" name="" value="绿色画笔" id="green" /><input type="button" name="" value="橡皮擦1" id="eraser"/><input type="button" name="" value="橡皮擦2" id="eraser2"/></div><script type="text/javascript">window.onload = function(){var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');canvas.width = 600;canvas.height = 600;var oinput = document.getElementsByTagName('input');for (var i = 0; i < oinput.length; i++) {oinput[i].onclick = function(){var id = this.getAttribute('id');switch(id){case 'clear':context.clearRect(0,0,canvas.width,canvas.height);break;case 'red':draw(context,"red");break;case 'blue':draw(context,"blue");break;case 'black':draw(context,"black");break;case 'zise':draw(context,"purple");break; case 'green':draw(context,"green");break; case 'eraser':clear(context,'#ccc');break;case 'eraser2':clearRect(context);break; }}}draw(context,"#fff");var canvasUrl = canvas.toDataURL();console.log(canvasUrl);}//橡皮擦2(清除路径)function clearRect(cxt){canvas.onmousedown = function(e){var e = e || window.event;cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);document.onmousemove = function(e){var e = e || window.event;cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);} document.onmouseup = function(){document.onmousedown = false;document.onmousemove = false;}}}//橡皮擦1(用和画布背景颜色相同的颜色，覆盖原有的路径)function clear(cxt,bgColor){canvas.onmousedown = function(e){var e = e || window.event;cxt.beginPath();cxt.strokeStyle = bgColor;cxt.lineWidth = 20;//线条的宽度cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);document.onmousemove = function(e){var e = e || window.event;cxt.lineTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);cxt.stroke();}document.onmouseup = function(){document.onmousedown = false;document.onmousemove = false;cxt.closePath();}}}//绘制路径function draw(cxt,bgColor){canvas.onmousedown = function(e){var e = e || window.event;cxt.beginPath();cxt.strokeStyle = bgColor;cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop - 3);document.onmousemove = function(e){var e = e || window.event;cxt.lineTo(e.clientX - canvas.offsetLeft - 3,e.clientY - canvas.offsetTop - 3);cxt.stroke();}}document.onmouseup = function(){document.onmousedown = false;document.onmousemove = false;cxt.closePath();}}</script></body></html>
想要获得更多资料的 请微信搜索公众号 【热血科技】，关注一下即可。
