HTML Canvas Ders_2 Bir Obje Çizmek

JavaScript ile Canvasa Obje Çizimi

Aşağıda bir dökdörtgen çizimi örneği görüyoruz:

<canvas id="kanvasim" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

<script>
var kanvas = document.getElementById("kanvasim");
var kalem = kanvas.getContext("2d");
kalem.fillStyle = "#FF0000";
kalem.fillRect(0,0,150,75);
</script>

Bu kodlar, tarayıcımızda şöyle görünecektir:

Şimdi beraberce bu kodları anlamaya çalışalım...

1- Öncelikle, boş bir canvas elemanı oluşturuyoruz:

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

2- "kanvas" adinda bir javascript değişkeni oluşturuyoruz: var kanvas  

id değerini kullanarak dökümanımızdaki <canvas> elemanına ulaşıyoruz: document.getElementById("kanvasim")

Oluşturduğumuz değişkene bu kanvası yüklüyoruz: 

var kanvas = document.getElementById("kanvasim");

3- Yine javascript kodları ile, <canvas> elemanımıza, iki boyutlu ("2d") çizim yapacak bir çizim aracı oluşturuyoruz: kanvas.getContext("2d")

Bu çizim aracını kalem adını verdiğimiz bir değişkene akatarıyoruz: var kalem = kanvas.getContext("2d");

4- Oluştuduğumuz kalem ile çizim yapıyoruz:

• kalem.fillStyle = "#FF0000"; kodu ile çizeceğimiz şeklin dolgusunu kırmızı ayarlıyoruz. Yani kalemimizi kırmızı kalem yapıyoruz. (fillStyle yapısı, bir CSS rengi, bir desen veya bir gradient (ışık efekti) olarak kullanılabilir. Biz burda kırmız dolgu rengini terçih ettik.) 
• kalem.fillRect(0,0,150,75); kodu ile de, <canvas> elemanımızın içine bir dikdörtgen (Rectangle) çiziyoruz. İlk iki koordinat bir noktanın, son iki koordinat, diğer bir notkanın koordinatlarıdır. Şöyle ki:

(0,0,150,75) sayıları, çizeceğimiz dikdörtgenin sol üst (0,0) ve sağ alt (150,75)  köşelerinin koordinatlarıdır. Bu ölçüler, oluşturduğumuz tuval (canvas)'in genişlik ve yüksekliği baz alınarak verilmiştir. Yani bu koordinatlar, tuvalimizin sol üst köşesi başlangıç noktası kabul edilerek verilmiştir. Dikdörtgenimizin sol üst köşesi (0,0) tuvalimizin sol üste köşesine sıfırlanmıştır. Dikdörtgenimizin sağ alt köşesi ise (150,75) tuvalimizin sol üst köşesinin 150 piksel sağında ve 75 piksel aşağısındadır. 

sonraki ders için tıklayınız

Ders_37 HTML JavaScript

HTML Dökümanlarında JavaScript Kullanmak

JavaScript de tıpkı CSS gibi farklı bir programlama dilidir diyebiliriz.

script kelimesi; küçük bir program, anlamındadır.

CSS, bir html dökümanını süslemeye, stillendirmeye yarar.

JavaScript ise, bir html dökümanına canlılık katar, sayfanın interaktif olmasını sağlar. Örneğin javascript, bir fare tıklamasıyla bir içeriğin kendisini, stilini değiştirmemizi sağlayabilir, kullanıcıya bir formu yanlış doldurduğuna dair bir uyarı penceresi gösterebilir, API uygulamaları oluşturabilir...

Bir html dökümanında, javascript kodları, <script> ve </script> tagları arasında yazılır. 

Web tarayıcıları, bu iki script arasındaki kodları, otomatik olarak, javascript kodu olarak algılarlar ve yorumlarlar.

Bazı tarayıcıların eski sürümleri, javascripti desteklemeyebilir. Sitemizin kullanıcıları arasında bu eski sürümleri kullananlar da olabilir. Bu yüzden, yazdığımız kodların tarayıcı tarafından okunmaması ihtimalini düşünerek <noscript> elemanı ile tedbirimizi almak iyi bir alışkanlık olacaktır.

Örneğe dikkat edelim:

<p id="deneme"></p>

<script>
document.getElementById("deneme").innerHTML = "merhaba JavaScript!";
</script>

<noscript>Üzgünüm, tarayıcınız JavaScript'i desteklememektedir! Lütfen tarayıcınızın son sürümünü yükleyin ya da ayarlarını değiştirin!</noscript>

Yukarıdaki kod karışık gelebilir. Bu şu an için normal bir durumdur. Kısaca kodları anlamaya çalışalım:

Önce bir paragraf elemanı oluşturduk ve kimliğini "deneme" olarak atadık: <p id="deneme"></p> 

Daha sona javascript kodları ile kimliğini kullanıp bu paragraf elemanının içeriğine ulaştık: document.getElementById("deneme").innerHTML

Daha sonra, eşittir öperatörü ile parafrafın içeriğini "merhaba JavaScript!" olarak atadık.

Son olarak da; <noscript>Üzgünüm, tarayıcınız JavaScript'i desteklememektedir! Lütfen tarayıcınızın son sürümünü yükleyin ya da ayarlarını değiştirin!</noscript> elemanı ile javascript kodumuz çalışmadığı zaman, ekranda yazmasını istediğimiz notu ilan ettik.

document.getElementById("deneme").style.fontSize = "25px"; kodu ile de kimliği "deneme" olan html elemanının harf büyüklüğünü 25 pixel yaptık. Yani javacript ile bir CSS uyguladık: style.fontSize = "25px";

document.getElementById("resim").src = "picture.gif"; kodu ile de kimliği "resim" olan html elemanına içerik olarak "picture.gif" adında bir resim atadık.

Aşağıdaki örnekle devam edelim:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript uygulaması</h1>
<p id="deneme">JavaScript, bir HTML elemanının stilini değiştirebilir.</p>
<script>
function fonksiyonum() {
document.getElementById("deneme").style.fontSize = "25px";
}
</script>
<button type="button" onclick="fonksiyonum()">Tıkla Beni değişikliği gör</button>
</body>
</html>

Yukarıdaki örnekte; <button type="button" onclick="fonksiyonum()">Tıkla Beni!</button> kodu ile; tıklandığı (onclick) zaman fonksiyonum() adındaki bir fonksiyonu çalıştıracak bir gönder butonu oluşturduk. 

fonksiyonum() adındaki fonksiyon ise, çalıştırıldığında, kimliği deneme olan paragraf elemanının yazı büyüklüğünü 25 pixel olarak stillendiriyor. 

Bu kodların sayfamızdaki görütüsü şöyle olacaktır:

JavaScript uygulaması

JavaScript, bir HTML elemanının stilini değiştirebilir.

Şu seviyede bu kodları anlamak çok da mümkün değildir. Burada sadece javascript dilinin neler yapabildiğine dair kısaca fikir sahibi olmaya çalıştık.

İlerleyen günlerde bir javascript bloğu oluşturma projemiz de vardır. Umarım gerçekleşir ve sizlerle javascript derslerinde tekrar buluşuruz.

HTML derslerimiz, HTML5'in getirdiği yeniliklerle devam edecektir...