今天教大家做一个小程序，利用css3和h5以及js做一个好玩的简易画板，有兴趣的朋友可以动手尝试一下，代码贴在下面。大家也可以发挥自己的创造力改动一些功能。
html：<body><canvas width="800" height="600" id="c1"><span></span></canvas><ul id="ul1"><li>颜色版：<input id="color" type="color"/></li><li>笔触：<input id="num" type="number" min="0" max="100"/></li><li></li></ul></body>css：<style>*{ margin:0; padding:0;}body{ background:#000;}canvas{ background:#fff; float:left;}span{ color:#fff; font-size:80px;}#ul1{width:100px;height:600px; float:left; background:#ccc;}</style>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网页
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）