今天教大家做一个小程序,利用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;
};
}
};