HTML5 Canvas ile Analog Saat Yapımı

Bu derste Javascript ile canvas elementine analog saat çizdirmeyi göstereceğim.

Merhaba, yazmış olduğum bu kodla size HTML 5′ in canvas elementini kullanarak bir analog saat yapmayı anlatacağım. Kod içinde gerekli açıklamalar yapılmıştır.

Açı birimi radyan olarak ele alındığı için, radyan – derece dönüşümlerini ve çember üzerinde gösterimini de bilmeniz gerekiyor.

Dikkat etmeniz gerekenler;

[*] context.rotate(açı) fonksiyonundaki açı parametresi radyan türünde olmalıdır.
(1 derece = pi/180 radyan dır, ve 1 radyan = 180/pi derecedir.)

[*] Radyan açıları 0 (sıfır) derece noktasından başlamaz. 0 (sıfır) radyan çemberde, saat yönünde 90 derece konumundan başlar.
[/list]Radyan Açıları

Aşağıdaki resimde radyan açıları gösterilmiştir.


Bir radyan, bir dairenin yarıçapına eşit uzunlukta olan bir yayın bu dairenin merkezinde oluşturduğu açıdır.

360 derece = 2 pi radyan' dır. Yani pi = 180 derecedir.

Saniye her dönüşünde 6 derecelik bir açı tarar ve 60 saniyede toplam 60×6 = 360 derecelik açı tarayarak dönüşünü tamamlar.

Dakika için de aynı kural geçerlidir. Her dakika 6 derecelik açı tarar.

Saat için durum farklıdır, sadece 12 saat gösterildiği için her saat 360/12 = 30 derecelik açı tarar.

Açılar derece olarak gösterilirken saniye ve dakika 6 ile, saat ise 30 ile çarpılır.

Canvas nesnesi açıyı radyan türünde istediği için bu açıları radyan türüne dönüştürmek zorundayız.


saniye açısı = 6 * saniye derecedir. Yani 30. saniye => 30 * 6 = 180 derecedir.

Radyan olarak ele alırsak:

saniye açısı = (saniye * 6) * (pi / 180) derece olur. Yani dereceyi pi/180 ile çarpmak bize radyan türünü verir.

saat açısı = 30 * saat derece, veya (saat * 30) * (pi / 180) radyandır. Yani 10. saat => 300 derece ve 300 * pi/180 radyandır.

Çalışan bir örnek görmek için buraya tıklayın.

Tamamladığınızda böyle görünecek:



HTML + Javascript kodu:


<!DOCTYPE html>

<html>

<body>



<canvas id="tuval" width="400" height="400" style="border:1px solid #000; border-radius: 200px">

Tarayıcınız HTML5 i Desteklemiyor!

</canvas>



<script type="text/javascript">



var c = document.getElementById("tuval");

var g = c.getContext("2d");



// Dereceyi radyana çeviren fonksiyon.

function degToRad(val)

{

 // 1 derece = Pi / 180 radyandır.

 return val * (Math.PI / 180); 

}



var x = c.width > c.height ? c.height : c.width; // Genişlik - Yükseklik Sabitleme



// Merkez nokta (a, b)

var a = x / 2;

var b = x / 2;



// Merkezi belirt

g.translate(a, b);



// Yuvarlak çizgi kenarları

g.lineCap = "round"; 



/*********** Saat Dekoru **********/



g.lineWidth = x * 0.0075;



for (i = 0; i < 60; i++)

{

 g.beginPath();

 

 g.moveTo(0, -x * 0.45);

 g.lineTo(0, i % 5 == 0 ? -x * 0.4 : -x * 0.425);

 g.stroke();



 g.rotate(degToRad(6));

}



/********* Göstergeleri Çizen Fonksiyon **********/



function saat()

{

 // Zamanı öğren

 var t = new Date();



 // Saniye, dakika ve saatin radyan türünden açılarını hesapla

 var sn = degToRad(6 * t.getSeconds());

 var dk = degToRad(6 * t.getMinutes() + t.getSeconds() / 10);

 var sa = degToRad(30 * t.getHours() + t.getMinutes() / 2);

 

 // Canvas boyutunu x değişkenine aktar

 x = c.width > c.height ? c.height : c.width;

 

 // Göstergeleri ekrandan temizle

 g.fillStyle = "#FFF";

 

 g.moveTo(0, 0);

 

 g.arc(0, 0, x * 0.4, 0, 2 * Math.PI, true);

 

 g.fill();

 

 // Tuvali saniye açısı kadar çevir

 g.rotate(sn);

 

 // Saniye göstergesi kalınlığını ayarla

 g.lineWidth = x * 0.0075;

 

 //Çizime başla

 g.beginPath();

 

 // Saniye göstergesini çiz.

 g.moveTo(0, 0);

 g.lineTo(0, -x * 0.375);

 g.stroke();

 

 // Tuvali normale döndür

 g.rotate(-sn);

 

 // Yelkovanın (dakika) kalınlığını ayarla

 g.lineWidth = x * 0.01;

 

 // Çizime başla

 g.beginPath();

 

 // Tuvali dakika açısı kadar döndür.

 g.rotate(dk);

 

 // Yelkovanı (dakika) çiz.

 g.moveTo(0, 0);

 g.lineTo(0, -x * 0.325);

 g.stroke();



 // Tuvali normale döndür.

 g.rotate(-dk);

 

 // Akrebin (saat) kalınlığını ayarla

 g.lineWidth = x * 0.02;

 

 // Çizime başla

 g.beginPath();

 

 // Tuvali saat açısı kadar döndür

 g.rotate(sa);

 

 // Akrebi (saat) çiz

 g.moveTo(0, 0);

 g.lineTo(0, -x * 0.275);

 g.stroke();

 

 // Tuvali normale döndür

 g.rotate(-sa);

 

 // Dolgu rengini ayarla

 g.fillStyle = "rgb(30,30,30)";

 

 // Saat camının tam ortasına yarıçapı 10 olan bir daire çiz ve içini doldur

 g.moveTo(0, 0);

 g.arc(0, 0, 10, 0, 2 * Math.PI, true);

 g.fill();

 

 // Merkezi normale döndür.

 g.translate(0, 0);

 

 // Bu fonksiyonu saniyede bir tekrarla.

 setTimeout("saat()", 1000);

}



// Sayfa yüklendiği zaman saat fonksiyonunu çalıştır.

window.onload = saat;

</script>



</body>

</html>



Bir sonraki yazımızda tekrar görüşmek dileğiyle.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git