HTML : HTML Grafikleri

No Comments

jpg, png ve gif gibi formatlar web sayfalarının görsel açıdan zenginleştirmek için kullanılır.

Günümüzde HTML’deki gibi çalışma anında grafik çizdirme işlemi için SVG ve Canvas yapıları W3C tarafından duyurulmuş.

SVG

  • SVG Ölçeklenebilir Vektör Grafikleri (Scalable Vector Graphics) anlamına gelir.
  • SVG vektör temelli grafikleri ifade etmek için kullanılır.
  • SVG grafikleri XML formatında tanımlar.
  • SVG grafikleri görüntü büyütülse de küçültülse de yeniden boyutlandırılma yapıldığı için kalite düşmez.
  • SVG resimleri etiket/metin tabanlı olduğu için aranabilir, indekslenebilir, script kodu ile yazılabilir ya da sıkıştırılabilir.
  • SVG dosyaları içindeki her element, her özellik (attribute) hareketlendirilebilir. (Animation)

Örnek:

SVG Şekilleri

  • Rectangle <rect>
  • Circle <circle>
  • Ellipse <ellipse>
  • Line <line>
  • Polyline <polyline>
  • Polygon <polygon>
  • Path <path>

SVG Rectangle

SVG Circle

SVG Ellipse

SVG Line

SVG Polygon

SVG Polyline

SVG Text

SVG Path

Path aşağıdaki komutlara göre çizme işlemi yapar.

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

SVG Stroke

Çizgi kalınlığı veya şeklini belirler.

SVG Filters

SVG’de görüntülere çeşitli filtreler uygulayabilirsiniz. Burada iki temel örnek verilecektir fakat birçok filter olduğunu unutmayın. İstediğiniz bir tarz filter’ı SVG Filters araması yaparak bulabilirsiniz.

SVG Gradients

Bir renkten diğer renge geçiş ile renklendirme yapabilir ve DOM üzerinden JavaScript ile bu etiketlere müdale edebilirsiniz.

HTML Canvas

  • Canvas, Tuval anlamına gelir.
  • <canvas> elementi script’ler (genellikle JavaScript) yoluyla grafikler çizmek için kullanılır.
  • <canvas> grafikler için sadece bir tutucudur (tuval).Gerçekten bir grafik çizmek için script kullanmalısınız.
  • Canvas ta SVG gibi yollar, kutular, daireler, yazılar ve resimler eklemek için bir kaç değişik metod kullanır.
  • JavaScript tarafında kodlandığı için event (olay) tabanlı tıklama, çift tıklama, klavye girişleri kontrol edilebilir.
  • Animasyon eklenebilir. Özellikle HTML tabanlı oyunlar için kullanılabilir.

Canvas

getElementByID ile HTML içindeki canvas elementi bulunur.

getContext ile tuval hazır hale getirilir.

fillStyle ile renk belirlenip fillRect komutu ile bir dikdörtgen çizimi yapılır.

Canvas Saat Örneği:

 

Diğer Yazılarımız

Tüm Yazılarımız

Soru işareti kalmasın

Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?

Hizmetlerimiz

Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.

Tüm Yenilik ve Kampanyalardan Haberdar Ol

Yazı hakkında ne Düşünüyorsunuz?