saat etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
saat etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

HTML Canvas ile Saat Yapımı

HTML Canvas İle Saat Yapımı

Bu dersimizde, canvas metotları ile, aşağıda gördüğünüz analog saati yapacağız.



I. Bölüm: Bir Canvas Oluşturmak

Yukarıdaki saat kadranını oluşturacak bir canvas elemanı için şu kodları kullanıyoruz:

 <canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas>
<script> var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var  radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90 drawClock();
function drawClock() {
ctx.arc(0, 0, radius, 0 , 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
}
</script>

Bu kodların anlamı şudur:

 <canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas> : 300 pixele 300 pixel boyutlarında bir tuval oluşturur ve arkaplan rengini koyugri yapar.

 var canvas = document.getElementById("canvas"); kodu ile de yukarıda oluştruduğumuz <canvas> elemanına id değerini kullanarak ulşıyoruz ve bu <canvas> elemanını canvas adında bir değişkene yüklüyoruz.

 var ctx = canvas.getContext("2d"); kodu ile, de canvasımızda objemizi çizmek için 2 boyutlu bir çizim objesi hazırlıyoruz ve objeyi ctx değişkenine yüklüyoruz.

 var radius = canvas.height / 2; kodu ile, saat kadranının yarıçapını hesaplıyoruz ve bu değeri radius adlı bir değişkene yüklüyoruz. (Bu yöntem, bütün <canvas> büyüklüklerinde çalışan bir saat yapmamızı sağlar.)

 ctx.translate(radius, radius); kodu ile, başlangıç noktasını (0,0), <canvas> elemanımızın oluşturduğu karenin merkezine taşımış oluyoruz.

 radius = radius * 0.90; kodu ile, saat yarıçapını yüzde 10 küçültmüş oluyoruz. Saatimizi çizecek bir fonkisyon yazıyoruz:

 function drawClock() {     
ctx.arc(0, 0, radius, 0 , 2*Math.PI);     
ctx.fillStyle = "white";     
ctx.fill();
}    

II. Bölüm: Saat Kadranını Oluşturmak

Saatin kadranını oluşturmak için şu kodu kullanıyoruz:

 function drawClock() {     
drawFace(ctx, radius);
}

function drawFace(ctx, radius) {     
var grad;     
ctx.beginPath();     
ctx.arc(0, 0, radius, 0, 2*Math.PI);     
ctx.fillStyle = 'white';     
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);     grad.addColorStop(0, '#333');     
grad.addColorStop(0.5, 'white');     
grad.addColorStop(1, '#333');     

 ctx.strokeStyle = grad;     
ctx.lineWidth = radius*0.1;     
ctx.stroke();
ctx.beginPath();     
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);     
ctx.fillStyle = '#333';     
ctx.fill();
}

Bu kodların anlamı şudur:

 Öncelikle drawFace adında bir fonksiyon oluşturuyoruz. Bu fonksiyon radyan efekti ile saatin dış çerçevesini oluşturan bir fonksiyondur. 

 Bu fonksiyondaki kodlar:

 Aşağıdaki kodlar beyaz dolgulu bir daire oluşturur:

 ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill(); 

 Aşağıdaki kodlar saatin gradyan efektli dış dairesini oluşturur:

grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');  

   
ctx.strokeStyle = grad; kodu ile çizim objemizin radyan efektini stroke stilinde oluşturuyoruz.

 ctx.lineWidth = radius * 0.1; kodu ile, dış çerçeve kalınlığını, yarıçapın yüzde 10'u kadar yapıyoruz.

 ctx.stroke(); kodu ile bir daire çiziyoruz.

 Aşağıdaki kodlar ile de kadranın merkezini çiziyoruz:

ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();

III. Bölüm: Saatin Sayılarını Çizmek

Bu işlem için drawNumbers adında bir fonksiyon oluşturuyoruz:
function drawNumbers(ctx, radius) {     
var ang;     
var num;     
ctx.font = radius*0.15 + "px arial";     
ctx.textBaseline="middle";     
ctx.textAlign="center";     
for(num= 1; num < 13; num++){         
ang = num * Math.PI / 6;         
ctx.rotate(ang);         
ctx.translate(0, -radius*0.85);         
ctx.rotate(-ang);         
ctx.fillText(num.toString(), 0, 0);         
ctx.rotate(ang);         
ctx.translate(0, radius*0.85);         
ctx.rotate(-ang);     
}
}

Bu fonksiyondaki kodların anlamı şudur:

ctx.font = radius*0.15 + "px arial"; kodu ile yazı büyüklüğünü, yarıçapın yüzde 15'i kadar yapıyoruz ve yazı stilini de arial yapıyoruz.

Aşağıdaki kodlar ile de sayıları yerleştirdiğimiz bölgenin merkezine ortalıyoruz:

ctx.textBaseline="middle"; ctx.textAlign="center";

12 sayıyı, yarıçapın son yüzde 15'lik kısmına, dairesel biçimde yerleştiriyoruz:

for(num= 1; num < 13; num++) {     
ang = num * Math.PI / 6;     
ctx.rotate(ang);     
ctx.translate(0, -radius*0.85);     
ctx.rotate(-ang);     
ctx.fillText(num.toString(), 0, 0);     
ctx.rotate(ang);     
ctx.translate(0, radius*0.85);    
ctx.rotate(-ang); 
}

IV. Bölüm: Akrep-Yelkovan ve Saniye İbreleri

Bu işlem için drawTime adında bir fonksiyon oluşturuyoruz:

function drawTime(ctx, radius){     
var now = new Date();     
var hour = now.getHours();     
var minute = now.getMinutes();     
var second = now.getSeconds();     

 //saat içi açı ayarı    
hour=hour%12;     
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));     drawHand(ctx, hour, radius*0.5, radius*0.07);     

 //dakika içi açı ayarı    
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));     
drawHand(ctx, minute, radius*0.8, radius*0.07);     

 //saniye içi açı ayarı    
second=(second*Math.PI/30);     

 drawHand(ctx, second, radius*0.9, radius*0.02);

 }
function drawHand(ctx, pos, length, width) {     
ctx.beginPath();     
ctx.lineWidth = width;     
ctx.lineCap = "round";     
ctx.moveTo(0,0);     
ctx.rotate(pos);     
ctx.lineTo(0, -length);     
ctx.stroke();     
ctx.rotate(-pos);
}

Bu fonksiyondaki kodların anlamı şudur:

 Aşağıdaki kodlar; saat, dakika ve saniyeyi elde etmemizi sağlar:

 var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();

 Saat içi açı ayarını şöyle yapıyoruz. (Saati gösterecek çubuğun uzunluğunu, yarıçapın yarısı kadar, kalınlığını da yarıçapın yüzde 7'si kadar ayarlıyoruz):

 hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60)); drawHand(ctx, hour, radius*0.5, radius*0.07);

 Benzer, ayarları dakika ve saniye için de yapıyoruz.

 drawHand() fonaksiyonu, akrepi, yelkovanı ve saniye çubuğunu belirtilen uzunluk ve kalınlıkta çizer.

V. Bölüm: Saati Başlatmak

Saati başlatmak için drawClock() fonksiyonunu interval metotu içinde çağırmamız yeterli olacaktır:

setInterval(drawClock, 1000); (bu kod, drawClock() fonksiyonunu, her 1 saniyede (1000 milisaniye) bir defa çağırır.)

Şimdi topluca, analog bir saat kodu nasıldır görelim:
<!DOCTYPE html>
<html>
<body>

<canvas id="canvas" width="300" height="300" style="background-color:#333"></canvas>

<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);


function drawClock() {
    drawFace(ctx, radius);
    drawNumbers(ctx, radius);
    drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
    var grad;

    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2*Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();

    grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
    grad.addColorStop(0, '#333');
    grad.addColorStop(0.5, 'white');
    grad.addColorStop(1, '#333');
    ctx.strokeStyle = grad;
    ctx.lineWidth = radius*0.1;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
    ctx.fillStyle = '#333';
    ctx.fill();
}
function drawNumbers(ctx, radius) {
    var ang;
    var num;
    ctx.font = radius*0.15 + "px arial";
    ctx.textBaseline="middle";
    ctx.textAlign="center";
    for(num= 1; num < 13; num++){
        ang = num * Math.PI / 6;
        ctx.rotate(ang);
        ctx.translate(0, -radius*0.85);
        ctx.rotate(-ang);
        ctx.fillText(num.toString(), 0, 0);
        ctx.rotate(ang);
        ctx.translate(0, radius*0.85);
        ctx.rotate(-ang);
    }
}
function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour    hour=hour%12;
    hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>
Gönderen Hiç yorum yok:
Etiketler: , , ,
Kaydol: Kayıtlar (Atom)