在HTML页面里做一个画板,用JS和html做一个简易画板代码

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

• 颜色版：
• 笔触：

css：

*{ 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;}

javascript:

window.οnlοad=function(){

var oC=document.getElementById('c1');

var oColor=document.getElementById('color');

var oNum=document.getElementById('num');

var gd=oC.getContext('2d');//画笔

oNum.οnchange=function(){

gd.lineWidth = oNum.value;

strokeFn();

};

oColor.οnchange=function(){

gd.strokeStyle = oColor.value;

strokeFn();

};

strokeFn();

function strokeFn(){

gd.beginPath();

oC.οnmοusedοwn=function(ev){

gd.moveTo(ev.clientX,ev.clientY);

oC.οnmοusemοve=function(ev){

gd.lineTo(ev.clientX,ev.clientY);

gd.stroke();

};

oC.οnmοuseup=function(){

oC.οnmοusemοve=oC.οnmοuseup=null;

};

return false;

};

}

};

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

相关阅读：