用JS和html做一个简易画板代码

 今天教大家做一个小程序，利用css3和h5以及js做一个好玩的简易画板，有兴趣的朋友可以动手尝试一下，代码贴在下面。大家也可以发挥自己的创造力改动一些功能。

html：
颜色版：
笔触：
css：javascript: <ｓｃｒｉｐｔ>window.onload=function(){var oC=document.getElementById('c1');var oColor=document.getElementById('color');var oNum=document.getElementById('num');var gd=oC.getContext('2d');//画笔oNum.onchange=function(){gd.lineWidth = oNum.value;strokeFn();};oColor.onchange=function(){gd.strokeStyle = oColor.value;strokeFn();};strokeFn();function strokeFn(){gd.beginPath();oC.onmousedown=function(ev){gd.moveTo(ev.clientX,ev.clientY);oC.onmousemove=function(ev){gd.lineTo(ev.clientX,ev.clientY);gd.stroke();};oC.onmouseup=function(){oC.onmousemove=oC.onmouseup=null;};return false;};}};

相信看了这些案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

相关阅读：

怎样不使用CSS改变鼠标悬停样式

如何用CSS做图片旋转效果

立即学习“前端免费学习笔记（深入）”；

怎么优化HTML网页