Selamlar,
Bu yazıda internet tarayıcısı üzerinde çalışan HTML ve Javascript kullanarak kendimize basit bir grafik çizme programı yazacağız. Bunun için üç tane dosya hazırlayacağız. Bunlar,
- grafik.html
- komutlar.js
- gorsel.css
“grafik.html” dosyamız uygulamamızın internet tarayıcısında (Chrome,Firefox,opera vb.) görünmesini sağlayacak olan dosyadır.
“komutlar.js” dosyası ise javascript yardımıyla çizim için gerekli hesaplamaları yaptığım kodların bulunduğu dosyadır.
“gorsel.css” dosyası ise internet tarayıcısında görselliği arttırmak için gerekli ayarlamaları (renk,kenarlık,yazı fontu,yazı rengi gibi) yaptığım dosyadır.
Aşağıda verdiğim bu dosyaların içeriklerini not defteri gibi bir metin programına yazıp ya da kopyala yapıştır yapıp kendi isimleriyle bilgisayarınızda aynı klasör içinde olacak şekilde kaydederseniz kendi bilgisayarınızda “garfik.html” dosyasına çift tıkladığınızda uygulamayı çalıştırabilirsiniz. İnternet tarayıcı programınız açıldığında karşınıza gelen görüntü aşağıdaki gibi olacaktır.
 |
Öncelikle tarayıcıda görünecek olan “grafik.html” dosyasına göz atalım.
<!DOCTYPE html> <!--Ümit ŞEN--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Grafik Çizim Uygulaması</title> <link rel="stylesheet" href="gorsel.css"> <script type="text/javascript" src="komutlar.js"></script> </head> <body> <table class='tablo'> <tr> <td>f(x) = <input type="text" id="fonksiyon" value="x"> <input type="button" value="Grafiği Çiz" onclick='grafikCiz(25)'></td> </tr> <tr> <td><canvas id="cizimAlani" width="1000" height="500"></td> </tr> </table> </body> </html>Burada önemli olan 7. ve 8. satırlardır. 7. satırda, “grafik.html” sayfamız tarayıcıda gösterilirken sayfadaki verilerin görsel olarak biçimlendirilmesi için gerekli bilgileri içeren “gorsel.css” dosyasını sayfaya dahil ediyorum. 8. satırda ise grafiği çizmek için gerekli matematik hesaplarının yapıldığı javascript komutlarını yazdığım “komutlar.js” dosyasını sayfaya dahil ediyorum.Tabi bu dosyaların içindeki komutlar,bilgiler direkt tek sayfa içine yani HTML dosyamız olan “grafik.html” dosyasının içine de yazabilirdik. Ben bu şekilde yapmayı tercih ettim.
Ayrıca sayfaya id değeri “fonksiyon” olan ve içeriği varsayılan değer olarak “x” olarak ayarladığım bir tane metin kutusu ekledim. Bu metin kutusu Grafiğini çizmek istediğimiz denklemi (2*x+5 gibi) girmeye yarayacak. Varsayılan olarak x olarak ayarladım.Dolayısı ile uygulama açıldığında y=x doğrusunun grafiği ekrana gelecek.
Denklemi yazdığımızda gerekli çizim işlemini gerçekleştirebilmek için üzerinde “Grafiği Çiz” yazan ve onclick olayına sayfaya dahil ettiğim “komutlar.js” dosyası içindeki “grafikCiz(25)” fonksiyonunu çalıştırmasını istediğim bir buton ekledim.Burada parantez içindeki 25 çizim alanını 25×25 karelere bölmek için kullandığım değiştirilebilir bir sayı. Yani alanızmız kareli defter gibi görünecek ve her 25 pikselde bir çizilen iki çizgi arası 1 birim örneğin 1 cm olarak hesabedilecek.Sonuç olarak da grafik de buna göre çizilecek.
Son olarak da HTML’nin başka bir elemanı olan “canvas” elemanını sayfaya ekledim. Ve sayfa içindeki kimlik değerini ifade eden id değerine “cizimAlani” ismini verdim.Çizim alanının genişliğini 1000 piksel yüksekliğini ise 500 piksel olarak ayarladım.
Buraya kadar özetleyecek olursam sayfada 3 tane HTML elemanı görünecek. Denklem gireceğim bir metin kutusu, denklemi girdikten sonra üzerinde “Grafiği Çiz” yazan ve tıkladığımda “grafikCiz(25)” komutunu çalıştıracak olan bir buton ve butona tıkladıktan sonra denklemin çizileceği id değeri “cizimAlani” olan bir canvas elementi.
Örnek olarak y=x ve y=2x+5 denklemlerinin grafiğini çizdirdiğim iki resimle konuya devam edelim.
(Resimleri büyük görmek için üzerine tıklayınız.)
|
 |
7. satırda sayfaya dahil ettiğim “gorsel.css” dosyasının içeriği.
/*Çizim alanını biçimlendir*/ #cizimAlani{ border: 2px solid #88F; background-color: aliceblue; } /*Denklem girilen metin kutusunu biçimlendir*/ #fonksiyon{ background-color: lightpink; border: 1px solid red; height: 23px; font-size: 18px; }Bu biçimlendirme komutları yardımıyla resimde de görüldüğü gibi sayfada görünen denklem gireceğim id değeri fonksiyon olan metin kutusunun arka plan rengini açık pembe(“lightpink”), kenarına çizdiğim çercevenin kalınlığını 1px(piksel), rengini kırmızı, içine girilen yazının boyunu da 18px olarak ayarladım.
Çizim alanının ise kenarına çizdiğim çerçevenin kalınlığını olarak 2px, rengini maviye yakın bir renk olan “#88F” olarak, arka plan rengini de “aliceblue” diye bir renkte tanımladım.
Bu biçimlendirme olmazsa da grafik uygulaması çalışır.Yani bu biçimlendirmenin bu uygulama için grafik çizimine bir etkisi yok. 🙂 Sadece uygulama biraz göze hoş görünsün diye deneme amaçlı yaptığım bir şey. 🙂 Kısaca bu biçimlendirmeler olmasa uygulama aşağıdaki gibi görünecekti.
 |
 |
Gelelim en can alıcı kısma. 😀 Bütün hesaplamaların yapıldığı “komutlar.js” dosyamıza.Bu dosyanın içeriğinde küçük küçük açıklama satırları eklediğim için uzun uzun anlatmayacağım. Zaten basit ve anlaşılır. 🙂
“komutlar.js” dosyasının içeriği.
//Sayfa ilk açıldığında grafik çizme fonksiyonunu çalıştırmak için window.onload=function(){ grafikCiz(25); }; //Grafik Çizme Fonksiyonu function grafikCiz(deger){ //Gerekli Değişkenler var k=deger, fonksiyon =document.getElementById('fonksiyon').value, canvas = document.getElementById('cizimAlani'), ctx = canvas.getContext('2d'), //Çizim alanının eni boyu canvasW=canvas.width, canvasH=canvas.height, //Çizim ekranının orta noktası centerX = canvasW/2, centerY = canvasH/2; ctx.clearRect(0,0,canvasW,canvasH); // X Eksenini Çiz ctx.beginPath(); ctx.moveTo(0,canvasH/2); ctx.lineTo(canvasW,canvasH/2); ctx.lineWidth=3; ctx.strokeStyle='#F00'; ctx.stroke(); // Y Eksenini Çiz ctx.beginPath(); ctx.moveTo(canvasW/2,0);//ilk nokta ctx.lineTo(canvasW/ 2,canvasH); ctx.stroke(); //Kareleri ayarla for (var j=0;j<canvasW;j++){ //yatay çizgiler ctx.beginPath(); ctx.moveTo(0,j*k); ctx.lineWidth=1; ctx.strokeStyle='#000'; ctx.lineTo(canvasW, j*k); ctx.stroke(); //dikey çizgiler ctx.beginPath(); ctx.moveTo(j*k,0); ctx.lineWidth=1; ctx.strokeStyle='#000'; ctx.lineTo(j*k, canvasW); ctx.stroke(); //Grafiği Çiz ctx.beginPath(); var x0=x=(centerX-j)/k; var y0=eval(fonksiyon); ctx.moveTo(centerX+x0*k,centerY-y0*k); ctx.lineWidth=4; ctx.strokeStyle='#00F'; var x1=x=(centerX-(j+1))/k; var y1=eval(fonksiyon); ctx.lineTo(centerX+x1*k,centerY-y1*k); ctx.stroke(); } }Çalışmanın videosu için tıklayın.
İyi günler…
Bir Çalışmanın Günlüğü 