Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     HTML5 Canvas Elementi ile Grafik İşlemleri
     admin     26.12.2012     08:47:03

HTML5′in bana göre en süper özelliği kesinlikle Canvas elementidir. Canvas tuval demektir. HTML5 ile canvas elementi oluşturduğunuzda içine grafik çizilmeye uygun ortam oluşturmuş olursunuz. Çizim işini başka dillerle halletmeniz gerekmektedir. Ki bunun için en uygun dil de javascript’tir.



Şimdi nasıl canvas elementi oluşturabileceğimize bir göz atalım;

<canvas id=”libersite” width=”150″ height=”150″></canvas>

Yazdığımız bu kodla 150px’e 150px’lik bir tuval oluşturduk. Id bilgisi olarak da libersite yazdım. Bu id ne işe yarayacak derseniz herhangi bir dil ile çizim yaparken oluştuduğumuz canvas’ı bu id ile çağıracağız. Aslında HTML5 canvas konusunda bize sadece bu noktaya kadar hizmet veriyor. İşin geri kalanını javascript ile halledeceğiz. Eğer canvas elementini oluştururken width ve height bilgilerini girmezseniz default olarak 300×150′lik bir canvas oluşturulur. Bunun yanında canvas elementinin boyunutunu css ile düzenleyebilirsiniz fakat çizimlerde bazı problemler oluşabileceğinden ötürü bu pek önerilmiyor. Bunun yanında canvas’la ilgili diğer bütün style özelliklerini css ile belirleyebilirsiniz. Bunun çizimlere hiçbir etkisi olmayacaktır.

Şimdi Render işlemini nasıl yapacağız ona bakalım.

öncelikle oluşturduğumuz canvas’ı çağırmamız gerekli bunun için şu kodu kullanıyoruz (javascript)

var canvas=document.getElementById(“libersite”);

Daha sonra içeriği(context) oluşturmak için şu kodu yazıyoruz.

var ctx = canvas.getContext(’2d’);

Şimdi de Genel kullanım şablonuna dair bir örnek verelim;

var canvas=document.GetElementById(‘libersite’);
if canvas(get.Context){
var ctx=canvas.GetContext(’2d’);
//çizim kodlarını buraya ekliyoruz
} else {
//Broser’ın canvas elementini desteklemediğine dair mesajı buraya yazıyoruz.
}

şimdi de w3schools’da yer alan örnek çizimleri inceleyelim, bakalım çizim işi nasıl yapılıyormuş.

<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.fillRect(0,0,150,75);
</script>

Bu kodu yazdığımızda karşımıza çıkacak görüntü şu şekilde olacaktır;

Peki bu kod bu görüntüdeki hangi faktörleri belirledi bunu tek tek inceleyelim.

var c=document.getElementById(“myCanvas”);

yukarıdaki kod ile myCanvas elementini çağırdık

var cxt=c.getContext(“2d”);

Bu kod ile de context’imizi belirledik.

cxt.fillStyle=”#FF0000″;

fillstyle komutu ile context’imizin içini tek renk ile doldurduk. karşısına da renk kodunu yazdık. (bu örnekte kırmızı)

cxt.fillRect(0,0,150,75);

Bu komutla da context’imizin koordinatlarını belirledik. Peki buradaki rakamlar hangi koordinatları belirliyor derseniz hemen cevabımızı verelim. En soldaki “0″ x eksenini belirliyor. Yani context’imizin sağa sola hareket etmesini sağlıyor. en soldan ikinci “0″ ise y eksenini belirliyor. Değerini değiştirdikçe yukarı aşağı harekini sağlıyor. 150 ve 75 değerleri ise sırasıyla width (en) height(boy) değerlerini belirliyor.

Şimdi de başka bir w3schools örneğini inceleyelim

<canvas id=”LiberSite” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Tarayıcınız Canvas Elementini Desteklemiyor
</canvas>

<script type=”text/javascript”>

var c=document.getElementById(“LiberSite”);
var cxt=c.getContext(“2d”);
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

bu örnekte ortaya çıkan görüntü şekildeki gibidir.

Moveto komutu çizime başlangıç noktasının koordinatlarıdır. 10,10 koordinatlarının yerini göstermek gerekirse;

işaretlediğim noktanın uç kısmı 10,10 koordinatlarıdır. Zaten MoveTo komutu bu başlangıç noktasını belirlemeye yarar.

cxt.lineTo(150,50); komutu ise hangi koordinata kadar çizim yapılacağını belirtir. çizim yapılacak nokta koordinatsal olarak x=150 y=50 olarak belirlenmiş.

yani 10 a 10 koordinatından 150′ye 50 koordinatına kadar çizim yapıldı.

cxt.lineTo(10,50); komutu ile de alttaki canvas’ın enine paralel olan çizim yapıldı. x=10 koordinatı soldan 10 piksellik boşluk bıraktı. y=50 koordinatı ise x=10′a kadar önceki yaptığımız çizimden başlayarak çizgi çekmiş oldu.

 

Diğer örnek kodlar;

Daire Çizimi

<!DOCTYPE HTML>
<html>
<body>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>

<script type=”text/javascript”>

var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
cxt.fillStyle=”#FF0000″;
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

Gradyent Oluşturmak

<!DOCTYPE HTML>
<html>
<body>

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #c3c3c3;”>
Your browser does not support the canvas element.
</canvas>

<script type=”text/javascript”>

var c=document.getElementById(“myCanvas”);
var cxt=c.getContext(“2d”);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,”#FF0000″);
grd.addColorStop(1,”#00FF00″);
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

</body>
</html>

--------------------------------------------------------Başka bir kaynak -------------------------------------------------------------------------

Html 4 yaklasik on yildir kullanimda ve suana kadar önemli bir degisim geçirmedi. HTML5 eski sürüme bazi yeni özellikler eklenerek geldi. Çok fazla sayida olmasa da çok kullanisli özellikler barindiriyor. Çalismalar 2004 de baslamisti. HTML 5 de suan ki en dikkat çekici ve kullanisla element CANVAS olarak gösteriliyor.

Yeni Elementlere Göz atalim

<canvas>

 

<canvas> Javascript ile kontrol edilen bir 2 boyutlu bir çizim alani. Genis bir kullanim alani var. Grafikleri oyunlar, sunumlar ve bir çok alanda kullanilabilir. Javascript ile kontrol edildigi için kolaylikla uyum saglayabileceginiz bir element. Canvas elementi ile ilgili örneklere bakmak isterseniz RGraph adresini ziyaret edin. Tabi ki HTML5 i destekleyen bir browser ile. Suanda IE 8 veya Firefox 3 kullanabilirsiniz. Asagida <canvas> elementini kullanilarak olusturulmus grafik örnekleri var.

Yukardaki gibi bir grafigi HTML 5 kullarak çizmek için asagidaki gibi javascript kodlari yazmak yeterli oluyor.
1
2
3
4
5
6
7
8
9
10
11
12
13
window.onload = function ()
{
    var data = [280,45,133,166,84,259,266,960,219,311];
    var bar = new Bar(’myCanvas’, data);
    bar.Set(’labels’, [’Metin’, ’ilhan’, ’Osman’, ’Sabri’, ’Orhan’, ’Ali’, ’Hüseyin’, ’Ismail’, ’Veli’, ’Deli’]);
    bar.Set(’gutter’, 45);
    bar.Set(’line’, true);
    bar.Set(’barcolor1’, ’#fff’);
    bar.Set(’barcolor2’, ’#fff’);
    bar.Set(’backgroundgrid’, true);
    bar.Set(’colors’, [’#f00’]);
    bar.Draw();
}

Yukaridaki javascript kodunda gördügünüz gibi canvas kütüphanesini kullanmak çok kolay.

<video>

Video tagi web sitenize video klipleri kolayca eklemenizi saglayacak. Otomatik baslatma, döngüsel olarak çalistirma gibi özellikleri olan video elementi videonuzu etiketlemeniz için birçok özellik içeriyor.

<audio>

Audio tagi video elementi ile ayni sekilde kullaniliyor tek farki video degil ses dosyalarini sitenize eklemeniye yariyor.

Context menüler

HTML5 context menu tanimlamak için yeni metotlar içeriyor. Context menüler genellikle web sitelerinde kullanilmazlar fakat web uygulamalarinda kullanilan ve çok ise yarayan elementlerdendir.

HTML 5 ile gelen yeni elemenler:

  • <section>
  • <header >
  • <footer>
  • <nav>
  • <article>
  • <aside>
  • <figure>
  • <mark>
  • <time>
  • <meter>
  • <progress>

Ayrica HTML 5 ile yeni input (giris) tipleride geldi. Bunlar;

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

 

HTML 5 ile degisen veya devre disi kalan elementler:

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u

(Kaynaklar : http://www.yazilimmutfagi.com            http://www.libersite.com )

Facebook'ta Paylaş    
Diğer HTML İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...