Canvas
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler


Html5 Canvas Yağmur Efekti Verme
Bu dersimiz de html5 ile yağmur efekti vermeyi göreceğiz.Bunun için [renk=!d12c69!] rainyday.js[/renk] yi kullanacağız.Yağmur efektini Seçtiğimiz bir resimin üzerine uyguluyoruz.Örneği incelerseniz...
  cArleone(HTML5)
HTML5 Canvas Ders-26 Metin Genişliklerini Bulmak - measureText
HTML5 canvas derslerimize devam ediyoruz.Bu derste fillText ile ekrana bastığımız metnin genişliğini bulmayı göreceğiz.Bunun için kullanacağımız komut measureText.MeasureText tuvalde belirlediğimiz font tipi,büyüklüğünü vs...
  cArleone(HTML5)
HTML5 Canvas Ders-25 clip() Kullanımı
Html5 serimize devam ediyoruz.Bu derste clip() methodunu anlatacağım.Clip kırpma anlamındadır.Canvasta ise yazıldığı yerde altaki tüm objeleri yukardakinin içine sokmasıdır.Yani yukarıdaki objeden taşan kısımları gizler.
  cArleone(HTML5)
HTML5 Canvas Ders-24 save() ve restore() Kullanımı
Html5 eğitimimize devam ediyoruz.Bu derste save() ve restore() methodlarını işleyeceğiz.Save ve restore kayıt et yükle işlemini yapıyor.Kayıt ettikleri şey ise canvasın o anki durumu.Şöyleki canvastaki komutların çoğu alt objeleri de etkiler...
  cArleone(HTML5)
HTML5 Canvas Ders-23 Mouse Koordinatlarını Alma
Html5 serimize devam ediyoruz.Bu derste mouse koordinatlarını almayı göreceğiz.Koordinatları şu şekilde alacağız.Canvasta mouse hareket etttiğinde mousenin sayfadaki konumunu alıp canvasın sayfadaki konumunda çıkardığımızda mousenin canvas üzerindeki koordinatını bulmuş oluruz...
  cArleone(HTML5)
HTML5 Canvas Ders-22 Olay Yakalayıcı - addEventListener
Html5 derslerimize devam ediyoruz.Bu derste event yani olay yakalayıcı olan addEventListener fonksiyonunu işliyeceğiz.Öncelikle ne tür olayları yakalıyor ona bakalım.Mouse hareket,tıkla,klavye tıklamaları,form etkileşimleri,yüklenme,değişim gibi bir çok eventı içinde barındırıyor.Bu derste hepsini ...
  cArleone(HTML5)
HTML5 Canvas Ders-21 Eğri çizmek - bezierCurveTo()
Html5 canvas serimize devam ediyoruz.Bu derste bezierCurveTo() kullanımını anlatacağım.BezierCurveTo eğri çizmemizi sağlıyor...
  cArleone(HTML5)
HTML5 Canvas Ders-20 Animasyon yapımı
HTML5 canvas derslerimize devam ediyoruz.Bu derste animasyon yapmayı anlatacağım.Bunun için kullanacağımız komutlardan biri [renk=!d12c69!] clearRect()[/renk] .ClearRect belirlediğimiz konumda belirlediğimiz bir alandaki tüm objeleri...
  cArleone(HTML5)
HTML5 Canvas Ders-19 Canvası Resim Olarak Kaydetme - toDataURL()
HTML5 canvas serimize devam ediyoruz.Bu derste [b]toDataURL()[/b] komutunu anlatacağım.ToDataURL canvastaki bulunan herşeyi tek bir resim haline getirip,resmin urlsini bize sunuyor.Geçen derste gösterdiğimiz resim rengi değiştirmeyide kullanarak bir örnek yaptım.ToDataURL bize verdiği...
  cArleone(HTML5)
HTML5 Canvas Ders-18 Resim Renklerni Değiştirme - putImageData()
HTML5 canvas derslerimize devam ediyoruz.Bu derste resmin renkleriyle oynamayı göstereceğim.Geçen derste [renk=!d12c69!] getImageData[/renk] 'yla resmin verilerini çekmiştik.GetImageData resmin her pixelin verisini veriyordu.Bu verileri ...
  cArleone(HTML5)
HTML5 Canvas Ders-17 Resim Bilgilerini Alma - getImageData()
HTML5 canvas derslerimize devam ediyoruz.Bu derste [b]getImageData()[/b] fonksiyonunu anlatacağım.GetImageData belirlediğimiz alan içindeki resimlere ait 4 bilgiyi pixele göre alıp bize verir.Bu veriler rgb ye ait olan [renk=!d12c69!] red,green,blue[/renk] verileri.Bunların dışında birde [renk=!d12c69!] alpha[/renk] değerini verir.Örnek...
  cArleone(HTML5)
HTML5 Canvas Ders-16 GlobalAlpha Kullanımı
HTML5 derslerimize devam ediyoruz.Bu derste objenin opaklığını azaltan globalAlpha kodunu işleyeceğiz.GlobalAlpha uygulandıktan sonra kendinden sonra gelen tüm objelere etki eder.Etkisini kapatmak için 1 değeri vererek yapabilirsiniz.Şimdi bir örnek yapalım...
  cArleone(HTML5)
HTML5 Canvas Ders-15 Shadow Kullanımı
Html5 derslerimize devam ediyoruz.Bu derste objelere ve metinlere gölge vermeyi göreceğiz.Öncelikle kullanacağımız kodları açıklayarak başlayalım...
  cArleone(HTML5)
HTML5 Canvas Ders-14 rotate() Kullanımı
HTML5 canvas derslerimize devam ediyoruz.Bu derste rotate() fonksiyonumuzu işleyeceğiz.İşlevinden başlayalım.Rotote ile canvas yani tuvalimizi döndürüyoruz.Aşağıda örnek ...
  cArleone(HTML5)
HTML5 Canvas Ders-13 scale() Kullanımı
HTML5 derslerimize devam ediyoruz.Bu derste scale() kodunu işleyeceğiz.Öncelikle işlevinden başlayalım.Tuvalimize bir çeşit zoom yani büyültme veya küçültme işlevindedir.Biraz sonra...
  cArleone(HTML5)
HTML5 Canvas Ders-12 translate() Kullanımı
HTML5 canvas derslerimize devam ediyoruz.Bu derste translate fonksiyonunu işleyeceğiz.Öncelikle işlevinden başlayayım.Translate canvas içindeki çizim başlama alanını değiştirmemize yarar.Resimli anlatayım daha iyi anlarsınız...
  cArleone(HTML5)
HTML5 Canvas Ders-11 Metin işlemleri
HTML5 derslerimize devam ediyoruz.Bu derste metin işlemlerini göreceğiz.Hemen kodlara geçelim.İlk önce sayfamıza tuvalimizi koyalım...
  cArleone(HTML5)
HTML5 Canvas Ders-10 Radial Gradient Yapımı
HTML5 derslerimize devam ediyoruz.Bu derste radial gradient işlemini göreceğiz.Geçen derste linear gradienti işemiştik.linear düz bir geçiş yapıyordu.Bu ise çember şeklinde renk geçişi yapıyor...
  cArleone(HTML5)
HTML5 Canvas Ders-9 Linear Gradient Yapımı
HTML5 canvas derslerimize devam ediyoruz.Bu derste linear gradienti işleyeceğiz.Linear gradient renk geçişlerini sağlamaktadır.Şimdi kodumuzu inceleyelim....
  cArleone(HTML5)
HTML5 Canvas Ders-8 Arkaplan Rengi (fillStyle-fill)
HTML5 serimize devam ediyoruz.Bu derste yaptığımız çizimlere arkaplan rengi vermeyi göreceğiz.Arka plan rengi seçmeyifillStyle ve boyamayı
  cArleone(HTML5)
HTML5 Canvas Ders-7 Sayfaya Resim Eklemek (drawImage)
HTML5 serimize devam ediyoruz.Bu derste tuvalimize resim eklemeyi göreceğiz.Resim eklemeyi drawImage() koduyla yapıyoruz.Şimdi kodlara geçelim.
  cArleone(HTML5)
HTML5 Canvas Ders-6 Daire Yapımı
HTML5 serimize devam ediyoruz.Bu derste daire çizmeyi göreceğiz.Geçen ders arc ile bir yarıçap belirleyip yay yapıyoduk.Yay başlama ve bitiş ucunu birleştirirsek bir daire oluyo...
  cArleone(HTML5)
HTML5 Canvas Ders-5 Yay çizmek (Arc)
HTML5 eğitim serimize devam ediyoruz.Bu derste yay yapımını göreceğiz...
  cArleone(HTML5)
HTML5 Canvas Ders-4 Dikdörtgen Yapımı
HTML5 canvas serimize devam ediyoruz.Bu derste dikdörtgen yapacağız...
  cArleone(HTML5)
HTML5 Canvas Ders-3 çizgi Stili
HTML5 canvas eğitim setimize devam ediyoruz.Bu derste çizginin stilini değiştirecez.Yani kalınlığını,rengini,ovalliğini ayarlayacaz...
  cArleone(HTML5)
HTML5 Canvas Ders-2 çizgi çizmek (lineTo)
HTML5 canvas serimize devam ediyoruz.Bu derste artık tuvalimize bir şeyler çizmeye başlayacaz. İlk olarak...
  cArleone(HTML5)
HTML5 Canvas Ders-1 Giriş
HTML5le gelen canvas tagını anlatmaya başlayacam.Öncelikle canvas ne onla başlayalım. Canvas tuval demek...
  cArleone(HTML5)

Önerilen Yazarlar
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol