Konular

Eskiler

Category Archives: Canvas

Şekil ve Resim – HTML CANVAS

Şekil ve Resim – HTML CANVAS Geometrik Şekil Oluşturma HTML Canvas kullanarak temel geometrik şekiller oluşturmak son derece kolaydır. HTML dilinin temellerini iyi bilen bir web tasarımcısı kolaylıkla canvas özelliklerini kullanabilir. Bu yazımıza temel geometrik şekillerin çizimlerinden bahsederek başlıyoruz. NOT : Yazımız yapılması gereken işlemlerden teorik olarak bahsetmektedir. Vereceğimiz bağlantılar ile örnek uygulamalarımıza ulaşabilirsiniz. Daire Daire çizimi için kullanacağımız js metodu arc() olacaktır. Bu metod daha önceki yazımızda eğimli çizgi oluşturabilmek için gerekli olduğundan bahsetmiştik. Daire oluştururken x ve y koordinatlarını belirleyen iki değişken ile radius özelliklerinden faydalanmamız gerekmektedir. Örnek uygulamamız için bu linkten faydalanabilirsiniz : Linke ulaşmak için tıklayınız… Dikdörtgen Dikdörtgen çizimi için ise kullanacağımız temel metod rect() olacaktır. Böylece dört çizgiden oluşan dikdörtgen şeklinde bir geometrik çizimi html sayfamızda çizdirmiş olacağız. Genişliği belirlemek için width özelliğini ve boyutlarımızı belirlemek için ise x ve y koordinat değerlerini kullanacağız. Örnek uygulamamız için bu linkten faydalanabilirsiniz : Linke ulaşmak için tıklayınız… Yarım Daire Daire…

HTML Canvas Nedir? Nasıl Kullanılır?

HTML Canvas Nedir ? HTML sayfası üzerinde istediğiniz bir şekilde çizim yapmaya ve bu çizimleri kullanarak dinamik bir görünüm sağlamaya yarayan bir HTML etiketidir. Canvas ile Javascript’den de faydalanarak çeşitli oyunlar kodlanabilmekte ya da çeşitli animasyonların gerektiği HTML sayfalarının tasarımları da gerçekleştirilebilmektedir. Daha iyi anlamanız adına teknik detaylar yerine günlük dile daha yakın bir anlatımı sizler için uygun gördüm.Canvas tasarımları 2D (iki boyutlu) veya 3D (özellikle oyun tasarımlarında) şekilde oluşturulabilmektedir. HTML5 teknolojisinin sağladığı en önemli özelliklerden biri hiç şüphesiz “canvas” etiketinin ortaya çıkmasıdır. Temel Şekiller Çizgi (Line) Web sayfası üzerine bir çizgi çizebilmesini sağlayan bir özelliktir. Çizilecek çizginin kalınlığı,uzunluğu,eğimi,rengi gibi bir çok özelliği yapacağınız tanımlamalar ile belirleyebilirsiniz. Temel bazı fonksiyonları kullanarak çizgi özelliklerini belirleriz.İşte bunlardan bazıları : 1.lineTo(): Çizgi eğimini belirlemek için kullanılır. Çizginin eğik yada düz olmasını bu özellik sayesinde ayarlayabiliriz. 2.beginPath(): Çizim yapılmaya başlandığığını deklara eden canvas metodudur. Bu metot line(çizgi) oluşturmak için her zaman gereklidir. 3.stroke(): Çizimin…