学步园

闲着无事，也学习一下html5，也要跟进时代嘛，否则就落伍了。

这里是一个简易的画板，目前还没有实现鼠标移动时候的轨迹，只是捕获鼠标点下的坐标作为起点，和鼠标弹起的坐标作为终点。画圆形的时候鼠标点下为原点的位置，鼠标弹起的坐标计算半径。

当中发现一个问题，矩形边框没有实现，目前是用两个矩形实现的边框效果，一个是填充颜色，一个是无填充颜色但有边框，两个合在一起看起来感觉是一个矩形带着边框一样。这种方法肯定是很傻，哎，留着下次完善吧！

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"><meta name="copyright" content=""><meta name="keywords" content=""><meta name="description" content=""><br /> <style> body {padding:0; margin:0; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;} body, h1 h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;} button, input, select, textarea {font: 12px/1.5 tahoma, arial, simsun, sans-serif;} h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; } address, cite, dfn, em, var { font-style: normal; } code, kbd, pre, samp { font-family: courier new, courier, monospace; } small { font-size: 12px; } ul, ol { list-style: none; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } legend { color: #000; } fieldset, img { border: 0; } button, input, select, textarea { font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } .clear {clear:both;} html { overflow:-moz-bars-vertical; } a { text-decoration: none;} a:hover { text-decoration: underline;} #Cl{border: solid 1px;cursor:default;position:absolute;width:188px;background:#ECE9D8;height:163px;font-size: 12px;text-align:right;} #Cl b{float:left;} #Cl6 input{width:28px;height:12px;font-size:12px;padding: 0px;line-height: 12px;font-family:Arial;border:1px solid #999;} #Cl div{position:absolute;} #Cl1{width:156px;left:3px;top:3px;} #Cl1 b{width:5px;line-height:5px;height:5px;overflow:hidden;} #Cl2{width:20px;left:163px;top:3px;} #Cl2 b{width:20px;line-height:5px;height:5px;overflow:hidden;} #Cl3{left:3px;width:20px;height:30px;top:85px;background:#Ff0000;border: inset 2px;border-right-width: 0px;} #Cl4{width:20px;height:30px;left:23px;top:85px;background:#Ff0000;border: inset 2px;border-left-width: 0px;} #Cl5{left:3px;top:117px;} #Cl6{width:110px;left:50px;top:85px;} #Cl7{width:20px;height:20px;position:absolute;text-align: center;-moz-user-select:none; hutia:expression(this.onselectstart=function(){return(false)});} #Cl8{width:20px;height:20px;position:absolute;left:160px;overflow:hidden;-moz-user-select:none; hutia:expression(this.onselectstart=function(){return(false)});} #Cl9{width:100px;left:3px;top:140px;}</p> <p>body{width:100%;} #av{margin:0 auto;border:2px dashed #ccc;cursor:pointer;} </style> <h1>简易画板</h1> <div class="wrap"> <p>工具：<input name="line" type="button" value="铅笔"><input name="line" type="button" value="直线"><input name="cyclo" type="button" value="圆形"><input name="rect" type="button" value="矩形"></p> <p>填充：<input id="fill" type="text" readonly value="#032CEB" onfocus="CL.init(this);"> 边框：<input id="border" readonly type="text" value="#EB1403" onfocus="CL.init(this);"> 笔触：<br /> <select onchange="setAPix(this);"> <option value="1">1px</option> <option value="2">2px</option> <option value="3">3px</option> <option value="4">4px</option> <option value="5">5px</option> <option value="6">6px</option> <option value="7">7px</option> <option value="8">8px</option> <option value="9">9px</option> <option value="10">10px</option> <option value="11">11px</option> <option value="12">12px</option> <option value="13">13px</option> <option value="14">14px</option> <option value="15">15px</option> </select> <p> 透明度：<br /> <select onchange="setAlpha(this);"> <option value="0.0">0.0</option> <option value="0.1">0.1</option> <option value="0.2">0.2</option> <option value="0.3">0.3</option> <option value="0.4">0.4</option> <option value="0.5">0.5</option> <option value="0.9">0.6</option> <option value="0.7">0.7</option> <option value="0.8">0.8</option> <option value="0.9">0.9</option> <option selected value="1.0">1.0</option> </select> <p>画笔：<span id="text">铅笔</span></p> <p> <canvas id="av" width="990" height="550">我靠，你太out了，赶紧换现代浏览器吧！</canvas></div> <p><script type="text/javascript"> var cav={ dom:$('av'), ctx:$('av').getContext('2d'), fillStlye:'#032CEB', border:'#EB1403', minLeft:$('av').offsetLeft, maxLeft:$('av').offsetLeft+$('av').offsetWidth, minTop:$('av').offsetTop, maxTop:$('av').offsetTop+$('av').offsetHeight, pen:function(){ var self=this; var d_x,d_y,left,top,move,tag=false; $('text').innerHTML='铅笔'; self.dom.onmousedown=function(e){ self.ctx.fillStyle=$('fill').value==''?self.fillStlye:$('fill').value; self.ctx.strokeStyle=$('border').value==''?self.border:$('border').value; self.ctx.beginPath(); e=e||window.event; d_x = e.clientX - self.minLeft; d_y = e.clientY - self.minTop; self.ctx.moveTo(d_x,d_y); tag=true; move=function(e){ e = e || window.event; left = e.clientX - self.minLeft; top = e.clientY - self.minTop; self.ctx.lineTo(left,top); self.ctx.stroke(); }; bind(document,'mousemove',move); }; document.onmouseup=function(e){ if(!tag)return ; removeEvent(document,'mousemove',move); tag=false; } }, line:function(){ var self=this; var d_x,d_y,left,top,tag=false; $('text').innerHTML='直线'; self.dom.onmousedown=function(e){ self.ctx.fillStyle=$('fill').value==''?self.fillStlye:$('fill').value; self.ctx.strokeStyle=$('border').value==''?self.border:$('border').value; self.ctx.beginPath(); e=e||window.event; d_x = e.clientX - self.minLeft; d_y = e.clientY - self.minTop; self.ctx.moveTo(d_x,d_y); tag=true; }; document.onmouseup=function(e){ if(!tag)return ; e = e || window.event; left = e.clientX - self.minLeft; top = e.clientY - self.minTop; self.ctx.lineTo(left,top); self.ctx.stroke(); tag=false; } }, rect:function(){ var self=this; var d_x,d_y,left,top,tag=false; $('text').innerHTML='矩形'; self.dom.onmousedown=function(e){ self.ctx.fillStyle=$('fill').value==''?self.fillStlye:$('fill').value; self.ctx.strokeStyle=$('border').value==''?self.border:$('border').value; e=e||window.event; d_x = e.clientX - self.minLeft; d_y = e.clientY - self.minTop; tag=true; }; document.onmouseup=function(e){ if(!tag)return ; var width,height; e = e || window.event; left = e.clientX - self.minLeft; top = e.clientY - self.minTop; width=left-d_x; height=top-d_y; if(width<0){ width=width*-1; d_x=left; } if(height<0){ height=height*-1; d_y=top; } self.ctx.fillRect(d_x,d_y,width,height); self.ctx.strokeRect(d_x-1,d_y-1,width+2,height+2); tag=false; } }, cyclo:function(){ var self=this; var d_x,d_y,left,top,tag=false; $('text').innerHTML='圆形'; self.dom.onmousedown=function(e){ self.ctx.fillStyle=$('fill').value==''?self.fillStlye:$('fill').value; self.ctx.strokeStyle=$('border').value==''?self.border:$('border').value; self.ctx.beginPath(); e=e||window.event; d_x = e.clientX - self.minLeft; d_y = e.clientY - self.minTop; tag=true; }; document.onmouseup=function(e){ var r,w,h; if(!tag)return ; e = e || window.event; left = e.clientX - self.minLeft; top = e.clientY - self.minTop; w=left-d_x; h=top-d_y; r=Math.round(Math.sqrt(w*w+h*h)); self.ctx.arc(d_x,d_y,r,0,Math.PI*2,true); self.ctx.fill(); self.ctx.stroke(); tag=false; } } } cav.pen(); function setAPix(self){ cav.ctx.lineWidth=self.value; } function setAlpha(self){ cav.ctx.globalAlpha=self.value; } var ins=document.getElementsByTagName('input'); for(var i=0,len=ins.length;i<len;i++){ if(ins[i].name=='line'&&ins[i].type=='button'){ ins[i].onclick=function(){ cav.line(); } } if(ins[i].name=='pen'&&ins[i].type=='button'){ ins[i].onclick=function(){ cav.pen(); } } if(ins[i].name=='rect'&&ins[i].type=='button'){ ins[i].onclick=function(){ cav.rect(); } } if(ins[i].name=='cyclo'&&ins[i].type=='button'){ ins[i].onclick=function(){ cav.cyclo(); } } } function $(i){return document.getElementById(i);} function position(el){//dom节点的绝对位置 if(el&&el.nodeType == 1) return {'left':el.getBoundingClientRect().left+document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top+document.documentElement.scrollTop}; } function removeEvent(el,type,fn){//移除绑定 el.detachEvent?el.detachEvent('on'+type,fn):el.removeEventListener(type, fn, false); } function bind(el,type,fn){ //绑定事件 if(el.attachEvent){ el['e'+type+fn] = fn; //IE下拷贝元素引用,使this指向el对象而不是window el[type+fn] = function(){el['e'+type+fn](window.event);} el.attachEvent('on'+type, el[type+fn]); }else if(el.addEventListener) el.addEventListener(type, fn, false); else el["on"+type]=fn; } function sel(x,max){ if(x.value<0)x.value=0; if(x.value>max)x.value=max; } function adiv(v,i){ if(!$(i)){//生成外层容器 var div = document.createElement("DIV"); div.id = i; document.body.appendChild(div); } var pos=position(v);//定位 with($(i).style){ left=pos.left+"px"; top=pos.top+v.offsetHeight+"px"; display=""; } } function ToHex(n){//16进制转换 var hexStr = "0123456789ABCDEF"; return hexStr.charAt((n-n%16)/16)+hexStr.charAt(n%16); } var CL={//系统颜色选取 init:function(v){ adiv(v,"Cl");//生成新的div this.e=51,this.s=51,this.l=120,this.u='',this.t=0,this.d,this.v=v;//控制面板生成 $("Cl").innerHTML=" <div id='Cl1' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'></div> <div id='Cl2' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'></div> <div id=Cl3></div> <div id=Cl4></div> <div id=Cl5></div> <div id=Cl6> 色调:<input onKeyUp='CL.cs()'> 红:<input onKeyUp='CL.cs(1)'> 饱合:<input onKeyUp='CL.cs()'> 绿:<input onKeyUp='CL.cs(1)'> 亮度:<input onKeyUp='CL.cs()'> 蓝:<input onKeyUp='CL.cs(1)'></div> <div id='Cl7' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'>╋</div> <div id='Cl8' onMouseMove='CL.mouseMove(event)' onMouseDown='CL.mouseDown(event)' onmouseup='CL.mouseUp()'>━</div> <div id='Cl9'><input type='button' value='确定' onclick='CL.setValue(1)' /> <input type='button' value='取消' onclick='CL.setValue()'/></div> <p>"; if(v.value)$('Cl3').style.background = v.value; window.getSelection?window.getSelection().removeAllRanges() : document.selection.empty(); this.o=$("Cl6").getElementsByTagName("input"); this.esl('0x'+v.value.substring(1,3),'0x'+v.value.substring(3,5),'0x'+v.value.substring(5,7)); var u=[]; for(s = 240; s >= 0; s -=16){//左侧色调区域生成 for(e = 0; e <= 240; e +=8) u.push("<b title='"+e+","+s+"' style='background:"+this.rgb(e,s,120,true)+"'></b>"); } $("Cl1").innerHTML=u.join(''); u=null;//内存释放 this.ls(); this.c1_left=position($('Cl1')).left; this.c1_top=position($('Cl1')).top; }, mouseDown:function(e){ this.d = true; this.mouseMove(e); }, mouseUp:function(){ this.d = false; }, mouseMove:function(e,t){//选取坐标 e = e || window.event; if(this.d == true){ if(e.clientX <this.c1_left+$('Cl1').offsetWidth){ this.o[0].value=Math.floor((e.clientX-this.c1_left)*80/51); this.o[2].value=240-Math.floor((e.clientY-this.c1_top)*240/78); }else this.o[4].value=240-Math.floor((e.clientY-this.c1_top)*240/152); } this.ls(); sel(this.o[0],240); sel(this.o[2],240); sel(this.o[4],240); $("Cl7").style.left = this.o[0].value*51/80-6+ "px";; $("Cl7").style.top=(240-this.o[2].value)*78/240-6 + "px"; $("Cl8").style.top=(240-this.o[4].value)*152/240-5 + "px"; $("Cl8").style.color=this.o[4].value>120?"#000000":"FFFFFF"; if(!t) $("Cl5").innerHTML=this.rgb(this.o[0].value,this.o[2].value,this.o[4].value); else $("Cl5").innerHTML=this.rgb(this.o[0].value,this.o[2].value,this.o[4].value,true); $("Cl4").style.background=$("Cl5").innerHTML; }, rgb:function(e,s,l,x){//rgb三原色转换 var cnum='100110010011001101100',m=new Array,t = new Array,k='#'; m[0]=e/8%5,m[1]=Math.floor(e/40)*3,m[2]=m[1]+3; for(var i=0;i<3;i++){ t=(cnum.charAt(m[2]+i)*m[0]+cnum.charAt(m[1]+i)*(5-m[0]))*3.4*s/16+128-s*8.5/16 t=(l>120?2*t+(255-t)*l/120-255:(t*l)/120); k+=ToHex(t); if(!x) this.o[i*2+1].value=Math.floor(t) } return k; }, esl:function(r,g,b,t){//亮度色相饱和度的转换 var_R = ( r / 255 ); //转换公式 var_G = ( g/ 255 ); var_B = ( b/ 255 ); var var_Min = Math.min( var_R, var_G, var_B ); var var_Max = Math.max( var_R, var_G, var_B ); var del_Max = var_Max - var_Min; var L = ( var_Max + var_Min ) / 2; if ( del_Max == 0 ){ H = 0; S = 0; }else{ S= L<0.5?del_Max / ( var_Max + var_Min):del_Max / ( 2 - var_Max - var_Min ); del_R = ( ( ( var_Max - var_R ) / 6 ) + ( del_Max / 2 ) ) / del_Max; del_G = ( ( ( var_Max - var_G ) / 6 ) + ( del_Max / 2 ) ) / del_Max; del_B = ( ( ( var_Max - var_B ) / 6 ) + ( del_Max / 2 ) ) / del_Max; if( var_R == var_Max ) H = del_B - del_G; else if ( var_G == var_Max ) H = ( 1 / 3 ) + del_R - del_B; else if ( var_B == var_Max ) H = ( 2 / 3 ) + del_G - del_R; if ( H < 0 ) H += 1; if(H >1) H -= 1; } this.o[0].value=Math.round(H*240); this.o[2].value=Math.round(S*240); this.o[4].value=Math.round(L*240); this.mouseMove("a",t); }, cs:function(t){//动态改变坐标选择 if(t==1){ sel(this.o[1],255); sel(this.o[3],255); sel(this.o[5],255); this.esl(this.o[1].value,this.o[3].value,this.o[5].value,true); }else this.mouseMove(); }, ls:function(){//右侧亮度选择区域生成 for(i=0;i<=240;i+=8) this.u+="<b title='"+(240-i)+"' style='background:"+ this.rgb(this.o[0].value,this.o[2].value,240-i,true) + "'></b>"; $("Cl2").innerHTML=this.u; this.u=''; }, setValue:function(t){//赋值给input if(t==1)this.v.value=$("Cl5").innerHTML; $("Cl").style.display="none"; } } </script>

运行代码