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...
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...
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.
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...
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...
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 ...
Html5 canvas serimize devam ediyoruz.Bu derste bezierCurveTo() kullanımını anlatacağım.BezierCurveTo eğri çizmemizi sağlıyor...
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...
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...
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 ...
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...
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...
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...
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 ...
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...
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...
HTML5 derslerimize devam ediyoruz.Bu derste metin işlemlerini göreceğiz.Hemen kodlara geçelim.İlk önce sayfamıza tuvalimizi koyalı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...
HTML5 canvas derslerimize devam ediyoruz.Bu derste linear gradienti işleyeceğiz.Linear gradient renk geçişlerini sağlamaktadır.Şimdi kodumuzu inceleyelim....
HTML5 serimize devam ediyoruz.Bu derste yaptığımız çizimlere arkaplan rengi vermeyi göreceğiz.Arka plan rengi seçmeyifillStyle ve boyamayı
HTML5 serimize devam ediyoruz.Bu derste tuvalimize resim eklemeyi göreceğiz.Resim eklemeyi drawImage() koduyla yapıyoruz.Şimdi kodlara geçelim.
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...
HTML5 eğitim serimize devam ediyoruz.Bu derste yay yapımını göreceğiz...
HTML5 canvas serimize devam ediyoruz.Bu derste dikdörtgen yapacağız...
HTML5 canvas eğitim setimize devam ediyoruz.Bu derste çizginin stilini değiştirecez.Yani kalınlığını,rengini,ovalliğini ayarlayacaz...
HTML5 canvas serimize devam ediyoruz.Bu derste artık tuvalimize bir şeyler çizmeye başlayacaz.
İlk olarak...
HTML5le gelen canvas tagını anlatmaya başlayacam.Öncelikle canvas ne onla başlayalım.
Canvas tuval demek...
UstaDerslik
