การวาดภาพด้วย JavaScript—ชุดฟังก์ชัน JS2D
ผู้เขียน：Eve Cole
เวลาอัปเดต：2009-06-08 18:25:42
<script Language="javascript"><br />
/****************** ชุดฟังก์ชัน JS2D *******************<br />
<br />
ผู้แต่ง: neweroica 2003-3-28<br />
<br />
ลิขสิทธิ์ (C) 2003<br />
<br />
โปรดเก็บข้อมูลลิขสิทธิ์นี้ไว้เมื่ออ้างอิงหรือพิมพ์ซ้ำ ขอบคุณ!!!<br />
<br />
ชุดฟังก์ชันนี้สามารถบันทึกเป็นไฟล์ js แยกต่างหาก: "JS2D.js"<br />
<br />
************************************************** * */<br />
<br />
/**************** วาดบ้าง******************<br />
พิกัดหน้าจอ (พิกเซล) ของจุด x,y<br />
สี สี (ค่าสตริง)<br />
ขนาด ขนาด (พิกเซล)<br />
************************************/<br />
ฟังก์ชั่น DrawDot(x,y,สี,ขนาด){<br />
document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: Absolute; left: "+(x)+"; top: "+(y)+" ;สีพื้นหลัง: "+สี+"' width="+size+" height="+size+"></td></tr></table>"<br />
<br />
<br />
/****************** วาดเส้นตรง******************<br />
x1,y1 พิกัดหน้าจอ (พิกเซล) ของจุดเริ่มต้น<br />
x2,y2 พิกัดหน้าจอ (พิกเซล) ของจุดสิ้นสุด<br />
สี สี (ค่าสตริง)<br />
ขนาด ขนาด (พิกเซล)<br />
สไตล์ สไตล์<br />
=0 เส้นทึบ<br />
=1 เส้นประ<br />
=2 เส้นทึบประ<br />
************************************/<br />
ฟังก์ชั่น DrawLine(x1,y1,x2,y2,สี,ขนาด,สไตล์){<br />
var i;<br />
var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));<br />
var theta=Math.atan((x2-x1)/(y2-y1));<br />
ถ้า(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))<br />
theta=Math.PI+theta;<br />
var dx=Math.sin(theta);//alert(dx)<br />
var dy=Math.cos(ทีต้า);<br />
สำหรับ(i=0;i<r;i++){<br />
สวิตช์(สไตล์){<br />
กรณีที่ 0:<br />
DrawDot(x1+i*dx,y1+i*dy,สี,ขนาด);<br />
แตก;<br />
กรณีที่ 1:<br />
i+=ขนาด*2;<br />
DrawDot(x1+i*dx,y1+i*dy,สี,ขนาด);<br />
แตก;<br />
กรณีที่ 2:<br />
if(Math.floor(i/4/size)%2==0){<br />
DrawDot(x1+i*dx,y1+i*dy,สี,ขนาด);<br />
<br />
อย่างอื่น{<br />
i+=ขนาด*2;<br />
DrawDot(x1+i*dx,y1+i*dy,สี,ขนาด);<br />
<br />
แตก;<br />
ค่าเริ่มต้น:<br />
DrawDot(x1+i*dx,y1+i*dy,สี,ขนาด);<br />
แตก;<br />
<br />
<br />
<br />
<br />
/****************** วาดรูปสี่เหลี่ยมทึบ******************<br />
x1,y1 พิกัดหน้าจอ (พิกเซล) ของจุดเริ่มต้น (มุมซ้ายบนของสี่เหลี่ยม)<br />
x2,y2 พิกัดหน้าจอ (พิกเซล) ของจุดสิ้นสุด (มุมล่างขวาของสี่เหลี่ยม) <br />
สี สี (ค่าสตริง)<br />
************************************/<br />
ฟังก์ชั่น DrawFilledRect(x1,y1,x2,y2,color){<br />
document.write("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: Absolute; left: "+(x1)+"; top: "+(y1)+" ;สีพื้นหลัง: "+สี+"' width="+(x2-x1)+" height="+(y2-y1)+"></td></tr></table>"<br / >
<br />
<br />
/****************** วาดรูปสี่เหลี่ยมผืนผ้า******************<br />
x1,y1 พิกัดหน้าจอ (พิกเซล) ของจุดเริ่มต้น (มุมซ้ายบนของสี่เหลี่ยม)<br />
x2,y2 พิกัดหน้าจอ (พิกเซล) ของจุดสิ้นสุด (มุมล่างขวาของสี่เหลี่ยม) <br />
สี สี (ค่าสตริง)<br />
ขนาด ขนาด (พิกเซล)<br />
สไตล์ สไตล์<br />
=0 เส้นทึบ<br />
=1 เส้นประ<br />
=2 เส้นทึบประ<br />
************************************/<br />
ฟังก์ชั่น DrawRect(x1,y1,x2,y2,สี,ขนาด,สไตล์){<br />
DrawLine(x1,y1,x2,y1,สี,ขนาด,สไตล์);<br />
DrawLine(x1,y2,x2,y2,สี,ขนาด,สไตล์);<br />
DrawLine(x1,y1,x1,y2,สี,ขนาด,สไตล์);<br />
DrawLine(x2,y1,x2,y2,สี,ขนาด,สไตล์);<br />
<br />
<br />
/****************** วาดวงรี******************<br />
x,y พิกัดหน้าจอ (พิกเซล) โดยที่จุดศูนย์กลางตั้งอยู่<br />
a,b ความยาวของแกนเอกและแกนรอง (พิกเซล)<br />
สี สี (ค่าสตริง)<br />
ขนาด ขนาด (พิกเซล)<br />
ความละเอียดของขอบที่แม่นยำ<br />
************************************/<br />
ฟังก์ชั่น DrawOval(x,y,a,b,สี,ขนาด,ความแม่นยำ){<br />
var i;<br />
var iMax=2*Math.PI;<br />
ขั้นตอน var=2*Math.PI/(ความแม่นยำ*Math.sqrt(a*b)*4.5);<br />
สำหรับ(i=0;i<iMax;i+=ขั้นตอน){<br />
DrawDot(x+a*Math.cos(i),y+b*Math.sin(i),สี,ขนาด);<br />
<br />
<br />
<br />
/**************** วาดรูปหลายเหลี่ยม******************<br />
x,y พิกัดหน้าจอ (พิกเซล) โดยที่จุดศูนย์กลางตั้งอยู่<br />
r รัศมีวงกลมที่ล้อมรอบรูปหลายเหลี่ยม (พิกเซล)<br />
n จำนวนด้านของรูปหลายเหลี่ยม<br />
สี สี (ค่าสตริง)<br />
ขนาด ขนาด (พิกเซล)<br />
สไตล์ สไตล์<br />
=0 เส้นทึบ<br />
=1 เส้นประ<br />
=2 เส้นทึบประ<br />
************************************/<br />
ฟังก์ชั่น DrawPoly(x,y,r,n,color,size,style){<br />
var i;<br />
var theta=Math.PI;<br />
var x1=x,y1=yr,x2,y2;<br />
สำหรับ(i=0;i<n;i++){<br />
ทีต้า-=(2*Math.PI/n);<br />
x2=x+r*Math.sin(ทีต้า);<br />
y2=y+r*Math.cos(ทีต้า);<br />
DrawLine(x1,y1,x2,y2,สี,ขนาด,สไตล์);<br />
x1=x2;<br />
y1=y2;//alert(x1+" "+y1)<br />
<br />
<br />
</script><br />
<br />
<br />
<script><br />
//****************** ตัวอย่างชุดฟังก์ชัน JS2D *******************<br />
DrawLine(20,20,300,20,"#0000cc",2,0);<br />
DrawLine(20,40,300,40,"#0000cc",2,1);<br />
DrawLine(20,60,300,60,"#0000cc",2,2);<br />
DrawFilledRect(20,80,300,200,"009900");<br />
DrawRect(20,220,220,320,"ff0000",2,0);<br />
DrawRect(240,220,440,320,"ff0000",2,1);<br />
DrawRect(460,220,660,320,"ff0000",2,2);<br />
DrawOval(250,450,120,50,"006600",1,1);<br />
DrawOval(250,650,120,120,"006600",2,0.5);<br />
DrawPoly(200,900,100,3,"ff8800",2,0);<br />
DrawPoly(400,900,100,4,"ff8800",2,1);<br />
DrawPoly(600,900,100,5,"ff8800",2,2);<br />
DrawPoly(200,1100,100,6,"ff8800",2,0);<br />
DrawPoly(400,1100,100,7,"ff8800",2,1);<br />
DrawPoly(600,1100,100,12,"ff8800",2,2);<br />
</สคริปต์>
