早晨醒來突然想寫一個畫圖函數，以前在網上看到有人做過，但都是用VML做的，只有ie支援。
偶這個是用<div>形成的絕對位置的點畫出來的，相容各種瀏覽器。
<!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 class="style1"> <script type="text/javascript"> function makedot(x,y){ //畫點函數 document.write("<div +x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>") } /** 函數功能：根據給定的圓心和半徑畫圓 函數思路：根據半徑及圓心座標利用數學方法計算從0°到360°的每點的座標，並畫出來。 */ 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); } } /** 函數功能：根據指點矩形左上方座標及長寬繪製矩形。 函數思路：根據左上座標及長寬，計算橫縱向邊每點的座標 */ function rect(x,y,w,h){ //(x,y)左上方座標,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); } } /** 函數功能：根據兩點座標畫直線。 函數思路：根據兩點的座標電腦斜率，然後根據第一個點座標及斜率計算直線上所有點然後畫線。垂直線特殊處理 */ 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); } } } } /** 函數功能：根據給定的三點座標畫三角形 函數思路：直接利用畫線函數畫三條線即可 */ function triangle(x1,y1,x2,y2,x3,y3){ line(x1,y1,x2,y2); line(x2,y2,x3,y3); line(x1,y1,x3,y3); } /** 函數功能：根據給定的一系列座標點畫多邊形 函數思路：迴圈讀取座標點，在當前座標點與下一座標點之間連線 */ function polygon(){ var args=arguments.length; if(args%2!=0) return -1; var realargs=args/2; //座標個數 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需重新整理才能執行]
