Menggambar dengan JavaScript—kumpulan fungsi JS2D
Penulis：Eve Cole
Waktu Pembaruan：2009-06-08 18:25:42
<skrip Bahasa="javascript"><br />
/****************** Kumpulan fungsi JS2D *******************<br />
<br />
Pengarang: neweroica 28-3-2003<br />
<br />
Hak Cipta (C) 2003<br />
<br />
Harap simpan informasi hak cipta ini saat mengutip atau mencetak ulang, terima kasih!!!<br />
<br />
Kumpulan fungsi ini dapat disimpan sebagai file js terpisah: "JS2D.js"<br />
<br />
******************************************************* * */<br />
<br />
/***************Gambarlah beberapa******************<br />
Koordinat layar (piksel) titik x,y<br />
warna warna (nilai string)<br />
ukuran ukuran (piksel)<br />
*************************************/<br />
fungsi drawDot(x,y,warna,ukuran){<br />
document.write("<batas tabel='0' spasi sel=0 cellpadding=0><tr><td style='posisi: absolut; kiri: "+(x)+"; atas: "+(y)+" ;warna latar: "+warna+"' width="+size+" height="+size+"></td></tr></table>")<br />
<br />
<br />
/******************Gambarlah garis lurus******************<br />
x1,y1 koordinat layar (piksel) dari titik awal<br />
x2,y2 koordinat layar (piksel) titik akhir<br />
warna warna (nilai string)<br />
ukuran ukuran (piksel)<br />
gaya gaya<br />
=0 garis padat<br />
=1 garis putus-putus<br />
=2 garis putus-putus<br />
*************************************/<br />
fungsi drawLine(x1,y1,x2,y2,warna,ukuran,gaya){<br />
var i;<br />
var r=Matematika.lantai(Matematika.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));<br />
var theta=Matematika.atan((x2-x1)/(y2-y1));<br />
if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))<br />
theta=Matematika.PI+theta;<br />
var dx=Matematika.sin(theta);//alert(dx)<br />
var dy=Matematika.cos(theta);<br />
untuk(i=0;i<r;i++){<br />
beralih(gaya){<br />
kasus 0:<br />
drawDot(x1+i*dx,y1+i*dy,warna,ukuran);<br />
istirahat;<br />
kasus 1:<br />
i+=ukuran*2;<br />
drawDot(x1+i*dx,y1+i*dy,warna,ukuran);<br />
istirahat;<br />
kasus 2:<br />
if(Matematika.lantai(i/4/ukuran)%2==0){<br />
drawDot(x1+i*dx,y1+i*dy,warna,ukuran);<br />
<br />
yang lain{<br />
i+=ukuran*2;<br />
drawDot(x1+i*dx,y1+i*dy,warna,ukuran);<br />
<br />
istirahat;<br />
bawaan:<br />
drawDot(x1+i*dx,y1+i*dy,warna,ukuran);<br />
istirahat;<br />
<br />
<br />
<br />
<br />
/****************** Gambarlah persegi panjang padat******************<br />
x1,y1 koordinat layar (piksel) dari titik awal (sudut kiri atas persegi panjang)<br />
x2,y2 koordinat layar (piksel) titik akhir (sudut kanan bawah persegi panjang) <br />
warna warna (nilai string)<br />
*************************************/<br />
fungsi drawFilledRect(x1,y1,x2,y2,warna){<br />
document.write("<batas tabel='0' spasi sel=0 cellpadding=0><tr><td style='posisi: absolut; kiri: "+(x1)+"; atas: "+(y1)+" ;warna latar: "+warna+"' width="+(x2-x1)+" height="+(y2-y1)+"></td></tr></table>")<br / >
<br />
<br />
/****************** Menggambar persegi panjang******************<br />
x1,y1 koordinat layar (piksel) dari titik awal (sudut kiri atas persegi panjang)<br />
x2,y2 koordinat layar (piksel) titik akhir (sudut kanan bawah persegi panjang) <br />
warna warna (nilai string)<br />
ukuran ukuran (piksel)<br />
gaya gaya<br />
=0 garis padat<br />
=1 garis putus-putus<br />
=2 garis putus-putus<br />
*************************************/<br />
fungsi drawRect(x1,y1,x2,y2,warna,ukuran,gaya){<br />
drawLine(x1,y1,x2,y1,warna,ukuran,gaya);<br />
drawLine(x1,y2,x2,y2,warna,ukuran,gaya);<br />
drawLine(x1,y1,x1,y2,warna,ukuran,gaya);<br />
drawLine(x2,y1,x2,y2,warna,ukuran,gaya);<br />
<br />
<br />
/******************Gambarlah elips******************<br />
x,y koordinat layar (piksel) di mana pusatnya berada<br />
a,b panjang sumbu mayor dan sumbu minor (piksel)<br />
warna warna (nilai string)<br />
ukuran ukuran (piksel)<br />
kehalusan tepi presisi<br />
*************************************/<br />
fungsi drawOval(x,y,a,b,warna,ukuran,presisi){<br />
var i;<br />
var iMax=2*Matematika.PI;<br />
var langkah=2*Math.PI/(presisi*Matematika.sqrt(a*b)*4.5);<br />
untuk(i=0;i<iMax;i+=langkah){<br />
drawDot(x+a*Matematika.cos(i),y+b*Matematika.sin(i),warna,ukuran);<br />
<br />
<br />
<br />
/*************** Menggambar poligon******************<br />
x,y koordinat layar (piksel) di mana pusatnya berada<br />
r Jari-jari lingkaran berbatas poligon (piksel)<br />
n Jumlah sisi poligon<br />
warna warna (nilai string)<br />
ukuran ukuran (piksel)<br />
gaya gaya<br />
=0 garis padat<br />
=1 garis putus-putus<br />
=2 garis putus-putus<br />
*************************************/<br />
fungsi drawPoly(x,y,r,n,warna,ukuran,gaya){<br />
var i;<br />
var theta=Matematika.PI;<br />
var x1=x,y1=tahun,x2,y2;<br />
untuk(i=0;i<n;i++){<br />
theta-=(2*Matematika.PI/n);<br />
x2=x+r*Matematika.sin(theta);<br />
y2=y+r*Matematika.cos(theta);<br />
drawLine(x1,y1,x2,y2,warna,ukuran,gaya);<br />
x1=x2;<br />
y1=y2;//peringatan(x1+" "+y1)<br />
<br />
<br />
</skrip><br />
<br />
<br />
<skrip><br />
//****************** Contoh kumpulan fungsi 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 />
</skrip>
