今天教大家做一个小程序，利用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:
<script>
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;
};
}
};
</script>
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
怎样不使用css改变鼠标悬停样式
如何用css做图片旋转效果
怎么优化html网页
以上就是用js和html做一个简易画板代码的详细内容。