JS畫圖(非VML)--兼容IE/FF

2019-11-21 02:26:10

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Untitled 1</title>  <style type="text/css">  .style1 {      font-size: x-small;  }  </style>  </head>  <body>  <span id="iwvjtn8m0"    class="style1">  <script type="text/javascript">  function makedot(x,y){ //畫點函數(shù)   document.write("<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>")  }  /**   函數(shù)功能：根據(jù)給定的圓心和半徑畫圓   函數(shù)思路：根據(jù)半徑及圓心坐標(biāo)利用數(shù)學(xué)方法計算從0°到360°的每點的坐標(biāo)，并畫出來。  */  function circle(x,y,r){ //(x,y)圓心，r半徑   var dotx,doty,radio;   var Pi=Math.PI;   makedot(x,y);   for(var i=0;i<360;i+=0.5){    radio=i*Pi/180;    dotx=r*Math.cos(radio)+x;    doty=r*Math.sin(radio)+y    makedot(dotx,doty);   }  }  /**   函數(shù)功能：根據(jù)指點矩形左上角坐標(biāo)及長寬繪制矩形。   函數(shù)思路：根據(jù)左上坐標(biāo)及長寬，計算橫縱向邊每點的坐標(biāo)  */  function rect(x,y,w,h){ //(x,y)左上角坐標(biāo),w,h 寬與高   for(var i=0;i<w;i++){    makedot(x+i,y);    makedot(x+i,y+h);   }   for(var i=0;i<h;i++){    makedot(x,y+i);    makedot(x+w,y+i);   }  }  /**   函數(shù)功能：根據(jù)兩點坐標(biāo)畫直線。   函數(shù)思路：根據(jù)兩點的坐標(biāo)計算機斜率，然后根據(jù)第一個點坐標(biāo)及斜率計算直線上所有點然后畫線。垂直線特殊處理  */  function line(x1,y1,x2,y2){   var slope=(y2-y1)/(x2-x1); //斜率   var diff=x2-x1;   if(x1<x2){    for(var i=0;i<diff;i++){     makedot(x1+i,y1+slope*i);    }   }else if(x1>x2){    for(var i=0;i>diff;i--){     makedot(x1+i,y1+slope*i);    }   }else{ //畫垂直線    var temp=y2-y1;    if(temp>0){     for(var i=0;i<temp;i++){      makedot(x1,y1+i);     }    }else{     for(var i=0;i>temp;i--){      makedot(x1,y1+i);     }    }   }  }  /**   函數(shù)功能：根據(jù)給定的三點坐標(biāo)畫三角形   函數(shù)思路：直接利用畫線函數(shù)畫三條線即可  */  function triangle(x1,y1,x2,y2,x3,y3){   line(x1,y1,x2,y2);   line(x2,y2,x3,y3);   line(x1,y1,x3,y3);  }  /**   函數(shù)功能：根據(jù)給定的一系列坐標(biāo)點畫多邊形   函數(shù)思路：循環(huán)讀取坐標(biāo)點，在當(dāng)前坐標(biāo)點與下一坐標(biāo)點之間連線  */  function polygon(){   var args=arguments.length;   if(args%2!=0) return -1;   var realargs=args/2; //坐標(biāo)個數(shù)   for(var i=0;i<realargs-1;i++){    line(arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]);   }   line(arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]);  }  circle(500,500,200);  rect(100,100,200,100);  triangle(200,200,100,400,300,400);  polygon(300,300,400,100,600,100,700,300,600,500,400,500);  </script>  </span>  </body>  </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：基于prototype的validation.js發(fā)布2.3.4新版本,讓你徹底脫離表單驗證的煩惱

下一篇：鼠標(biāo)移動到一張圖片時變?yōu)榱硪粡垐D片