Html5 canvas kullanımı, yazı, çizgi, daire, resim çizdirmek

Arif Ceylan/ Aralık 16, 2014/ HTML/ 1 comments

Html5 canvas kullanımı

Canvas html5 ile gelen yeni bir etikettir. Canvas ortamı üzerinde çizimler yapabilir, resimler ekleyebilir, animasyonlar oluşturabilir, hatta oyunlar hazırlayabilirsiniz.

Kullanımı

Şeklindedir. Tarayıcı canvası desteklemiyorsa etiket arasındaki yazı gözükecektir.

Html kodlarıyla canvas etiketini ekledik. Canvasa müdahale etmek, çizimler yapmak için javascripti kullanmamız gerekiyor.

 

Script kodlarını canvas etiketinden sonra kullanacağız. Html kodlarının tamamı aşağıdadır.

 

Yukarıdaki örnekte dikdörtgeni canvas içerisine çizdik.

Başka örneklere bakalım.

Çizgi çizdirmek

 

Daire

 

Yazı yazdırmak

 

Kenarlıklı, içi boş yazı(stroketext)

 

Renk geçişi(gradient)

 

Not: Linear(doğrusal) gradient yerine circular(dairesel) gradient kullanmak için

 

örnekteki gibi createRadialGradient fonksiyonunu kullanmamız gerekir.

Resim çizdirmek

 

Yukarıdaki örnekte <img id=”scream” src=”….” /> şeklinde tanımlanmış olan resmi canvas içerisine eklemektedir.

Gelen arama terimleri:

  • html daire kullanımı

1 Comment

  1. öncelikle internet üzerinde türkçe kaynaklarda canvas hakkında doğru düzgün bilgi bulamıyordum. Sizin anlatımınız çok güzel bu yüzden teşekkür ederim. gelelim soruma daire çizerken

    ctx.arc(95,50,40,0,2*Math.PI); bunu kullandınız bu nedir açıklarsanız sevinirim bide ctx ne olduğunu anlayamadım. Kusura bakmayın acemeyim açıklarsanız çok sevinirim.

Leave a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">
*
*