`
花藤_
  • 浏览: 1559 次
  • 性别: Icon_minigender_2
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

喂啊,谁会用代码画曲线

 
阅读更多
<button   onclick= "testDrawCurve() "> 画曲线 </button> 
<button   onclick= "testDrawArc() "> 画弧线 </button> 
<button   onclick= "testDrawCircle() "> 画圆 </button> 
<button   onclick= "testDrawLine() "> 画线 </button> 
<button   onclick= "testDrawRectangle() "> 画矩形 </button> 
<button   onclick= "testDrawPie() "> 画饼图 </button> 
<div   id=div1> </div> 
<SCRIPT   LANGUAGE= "JavaScript "> 
<!-- 
function   testDrawCurve() 
{ 
div1.innerHTML   =   drawCurve(); 
} 
function   testDrawArc() 
{ 
div1.innerHTML   =drawArc(150,150,100,0,270, "blue ") 
} 
function   testDrawCircle() 
{ 
div1.innerHTML   =   drawCircle(200,200,150, "blue "); 
} 
function   drawCircle(x0,y0,radius,color) 
{ 
return   drawArc(x0,y0,radius,0,360,color) 
} 
function   testDrawLine() 
{ 
div1.innerHTML   =   drawLine(100,200,500,200, "yellow ")+drawLine(300,100,300,400, "black ")+drawLine(600,400,100,100, "violet ") 
} 
function   testDrawRectangle() 
{ 
div1.innerHTML   =   drawRectangle(200,100,600,200, "blue ")+drawRectangle(100,200,400,500, "red ") 
} 
function   testDrawPie() 
{ 
div1.innerHTML   =   drawPie(300,200,120,0,45, "red "); 
} 

function   drawLine(x0,y0,x1,y1,color) 
{ 
var   rs   =   " "; 
if   (y0   ==   y1)     //画横线 
{ 
if   (x0> x1){var   t=x0;x0=x1;x1=t}     
rs   =   " <span   style= 'top: "+y0+ ";left: "+x0+ ";position:absolute;font-size:1px;background-color: "+color+ ";height:1;   width: "+Math.abs(x1-x0)+ " '> </span> "; 
} 
else   if   (x0   ==   x1)     //画竖线 
{ 
if   (y0> y1){var   t=y0;y0=y1;y1=t}   
rs   =   " <span   style= 'top: "+y0+ ";left: "+x0+ ";position:absolute;font-size:1px;background-color: "+color+ ";width:1;height: "+Math.abs(y1-y0)+ " '> </span> "; 
} 
else 
{ 
var   lx   =   x1-x0 
var   ly   =   y1-y0 
var   l   =   Math.sqrt(lx*lx+ly*ly) 
rs   =   new   Array(); 
var   px,py,px0,py0,p; 
for   (var   i=0;i <l;i+=1) 
{ 
p   =   i/l; 
px   =   parseInt(x0   +   lx*p); 
py   =   parseInt(y0   +   ly*p); 
if   (px0!=px   ||   py0!=   py) 
rs[rs.length]   =   " <span   style= 'top: "+py+ ";left: "+px+ ";height:1;width:1;position:absolute;font-size:1px;background-color: "+color+ " '> </span> "; 
px0=px; 
py0=py; 
} 
rs   =   rs.join( " "); 
} 
return   rs 
} 
function   drawRectangle(x0,y0,x1,y1,color) 
{ 
x0=parseInt(x0); 
x1=parseInt(x1); 
y0=parseInt(y0); 
y1=parseInt(y1); 
if   (x0   ==   x1   ||   y0   ==   y1)   return; 
if   (x0> x1)   {var   t=x0;x0=x1;x1=t} 
if   (y0> y1)   {var   t=y0;y0=y1;y1=t} 
return   " <span   style= 'top: "+y0+ ";left: "+x0+ ";position:absolute;background-color= "+color+ ";   width: "+(x1-x0)+ "   ;height: "+(y1-y0)+ " '> </span> "; 
} 
function   drawPie(x0,y0,radius,startAngle,endAngle,color) 
{ 
var   rs   =   drawArc(x0,y0,radius,startAngle,endAngle,color) 
startAngle   =   startAngle/360*Math.PI*2; 
endAngle   =   endAngle/360*Math.PI*2; 
var   startx=Math.sin(startAngle)*radius+x0; 
var   endx=Math.sin(endAngle)*radius+x0; 
var   starty=Math.cos(startAngle)*radius+y0; 
var   endy=Math.cos(endAngle)*radius+y0; 
rs   +=   drawLine(x0,y0,startx,starty,color) 
rs   +=   drawLine(x0,y0,endx,endy,color) 
return   rs; 
} 
function   drawArc(x0,y0,radius,startAngle,endAngle,color) 
{ 
rs   =   new   Array(); 
tmpar   =   new   Array(); 
startAngle   =   startAngle/360*Math.PI*2; 
endAngle   =   endAngle/360*Math.PI*2; 
var   dx,dy,dx0,dy0; 
for   (var   i=startAngle;i <endAngle;i+=(1/radius)) 
{ 
dx   =   parseInt(Math.sin(i)*radius+x0); 
dy   =   parseInt(Math.cos(i)*radius+y0); 
if   (dx!=dx0   ||   dy!=dy0) 
rs[rs.length]   =   " <span   style= 'top: "+dy+ ";left: "+dx+ ";position:absolute;height:1;width:1;position:absolute;font-size:1px;background-color: "+color+ " '> </span> "; 
dx0=dx;dy0=dy; 
} 
return   (rs.join( " ")); 
} 
function   drawCurve() 
{ 
var   rs   =   new   Array(); 
for   (var   i=0;i <2*Math.PI;i+=.01) 
{ 
var   x   =   parseInt(300-Math.sin(i)*100) 
var   y   =   parseInt(300-Math.cos(i)*100) 
rs[rs.length]   =   " <span   style= 'top: "+x+ ";left: "+(i*100+90)+ "   ;height:1;width:1;position:absolute;font-size:1px;background-color:blue '> </span> "; 
rs[rs.length]   =   " <span   style= 'top: "+y+ ";left: "+(i*100+90)+ "   ;height:1;width:1;position:absolute;font-size:1px;background-color:blue '> </span> "; 
} 
return   rs.join( " "); 
} 
//--> 

想用代码做一条彩虹,学java的,理解有点慢,代码是神奇的,但是实在不会驾驭,我只会修修改改,百度了很多只找到个这个觉得好像还有点用,

 

 

 

但好像只有按钮啊,点又没反应,是不是用错浏览器了

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics