www.6766.comjs绘制圆形和矩形的方法_javascript技巧_脚本之家

js来绘制圆形和矩形 *{margin:0; padding:0;} #div{position:absolute; background:#ccc;} .sel{ margin:30px auto; width:960px; overflow:hidden} li{ list-style:none; float:left; width:60px; height:20px;} #colors{ width:500px; float:left} .selColor{ float:left} #radius{ width:40px; height:20px;} .red{background:red;} .yellow{background:yellow;} .blue{background:blue;} .pink{background:pink;} .black{background:black;} .orange{background:orange;} .green{ background:green;} .xz{ width:340px; float:right;} #canvas{ width:960px; height:500px; border:1px solid #ccc; margin:0 auto}function $Id{ return document.getElementById; }window.onload=function(){ var oCanvas=$Id; var oRoud=$Id; var oRadius=$Id; var oCir=$Id; var oSqu=$Id; var oColors=$Id; var aColors=oColors.getElementsByTagName; var color='red'; var aInputs=document.getElementsByTagName; var xz='roud'; var arr=[]; for(var i=0;i<aInputs.length;i++) { if(aInputs[i].type=='checkbox') { arr.push; } } for(var i=0;i<arr.length;i++) { arr[i].onclick=function { this.checked=false; } else { for(var j=0;j<arr.length;j++) { arr[j].checked=false; } this.checked=true; xz=this.value; } } } //选择颜色 for(var i=0;i<aColors.length;i++) { aColors[i].onclick=function() { color=this.className; } } oCanvas.onmousedown=function { if { oCanvas.setCapture(); } for(var i=0;i<arr.length;i++) { if { arr[i].checked=true; xz= arr[i].value; } } var oEv=ev||window.event; var disX=oEv.clientX; var disY=oEv.clientY; var oR=document.createElement; oR.; oR.style.top=disY+'px'; oR.style.left=disX+'px'; oR.style.backgroundColor=color; document.body.appendChild; document.onmousemove=function { var oEv=ev||window.event; var x=oEv.clientX; var y=oEv.clientY; if { x=oCanvas.offsetLeft; } else if(x>oCanvas.offsetLeft+oCanvas.offsetWidth) { x=oCanvas.offsetLeft+oCanvas.offsetWidth } if { y=oCanvas.offsetTop; } else if(y>oCanvas.offsetTop+oCanvas.offsetHeight) { y=oCanvas.offsetTop+oCanvas.offsetHeight } oR.style.width=Math.abs+'px'; oR.style.top=Math.min+'px'; oR.style.left=Math.min+'px'; switch { case 'roud': oR.style.height=Math.abs+'px'; oR.style.borderRadius=oRadius.value+'px'; break; case 'circle': oR.style.height=Math.min,Math.abs+'px'; oR.style.width=Math.min,Math.abs+'px'; oR.style.borderRadius=(Math.min,Math.abs/2+'px'; break; case 'squ': oR.style.height=Math.abs+'px'; break; case 'square': oR.style.height=Math.min,Math.abs+'px'; oR.style.width=Math.min,Math.abs+'px'; } } document.onmouseup=function() { document.onmousemove=null; document.onmouseout=null; if(oCanvas.releaseCapture) { oCanvas.releaseCapture(); } } return false; }}  请选择一种颜色           圆角矩形 半径 正圆 矩形 正方形    

这里使用js来绘制圆形和矩形,支持选择图形的背景颜色,同时可设置圆角矩形、半径、正圆、矩形、正方形这几个选项。或许这些图形你不需要,但重要的是让你学会JavaScript绘制图形的方法,这是要表达的核心。

本文实例讲述了js绘制圆形和矩形的方法。分享给大家供大家参考。具体如下:

希望本文所述对大家的javascript程序设计有所帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图