Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan HTML 5 ve CSS 3 eğitim setinin 22. dersidir. Eğitmen, izleyicilere grafik tasarım konularını adım adım göstermektedir.
- Video, kanvas kullanımı ile başlayıp SVG (Scalable Vector Graphics) grafiklerine geçiş yapmaktadır. İlk bölümde JavaScript kullanılarak kanvas üzerinde üçgen çizimi gösterilirken, ikinci bölümde SVG etiketleriyle daire, elips ve çokgen çizimi anlatılmaktadır. Ayrıca font değişimi, renk ayarlaması ve opacity değerlerini değiştirerek geçiş efektleri oluşturma teknikleri de detaylı şekilde açıklanmaktadır.
- Eğitimde özellikle SVG'de renk, kalınlık ve şeffaflık gibi özelliklerin nasıl ayarlanacağı ve X düzleminde opacity değerlerinin 0.6'dan 1'e doğru nasıl değiştirileceği gibi logo tasarımı için kullanılabilecek teknikler gösterilmektedir.
- 00:09HTML5 Canvas Örneği
- HTML5 ve CSS3 eğitim setinin 22. dersinde canvas örneği gösterilecek ve SVG grafiklere geçilecek.
- Önceki derste JavaScript ile canvas nesnesi seçildi ve iki boyutlu çizim yapıldı.
- Canvas'a renk vermek için "fillStyle" komutu kullanılır ve "fill" komutu ile içi doldurulur.
- 01:29Üçgen Çizimi
- Üçgen çizimi için önce koordinatlar belirlenir: (60,200) noktasından başlanır.
- "lineTo" komutu ile çizgiler çizer ve "moveTo" komutu ile çizim başlangıç noktası değiştirilir.
- Üçgen tamamlanması için "closePath" komutu kullanılır ve "fill" komutu ile içi doldurulur.
- 05:43SVG Grafikleri
- SVG (Scalable Vector Graphics) vektörel grafiklerdir ve XML tabanlı bir grafik çizim dilidır.
- SVG etiketleri açılıp kapatılır ve genişlik-yükseklik değerleri verilerek bir tuval oluşturulur.
- SVG'de JavaScript kodlaması yerine etiketler ve öznitelikler kullanılarak çizim yapılır.
- 07:25Daire Çizimi
- SVG'de daire çizmek için "circle" etiketi kullanılır ve "cx" ile x koordinatı, "cy" ile y koordinatı belirtilir.
- "r" özniteliği ile yarıçap değeri, "stroke" ile dış çizgi rengi ve "stroke-width" ile çizgi kalınlığı ayarlanır.
- "fill" özniteliği ile dairenin içi renklendirilir.
- 11:59Polygon ve Elips
- Polygon (çokgen) çizmek için "polygon" etiketi kullanılır ve noktalar belirtilerek şekil oluşturulur.
- Elips çizmek için "ellipse" etiketi kullanılır ve "cx", "cy" ile merkez koordinatları, "rx" ile x-yarıçapı, "ry" ile y-yarıçapı belirtilir.
- SVG'de metin ekleme için "text" etiketi kullanılır ve "x", "y" değerleri ile konumu ayarlanabilir.
- 14:45Renk ve Font Ayarları
- Font değiştirme işlemi gerçekleştiriliyor.
- Linear geçişli bir renk ayarlaması yapılacağı belirtiliyor.
- Renk tanımlaması yaparak radyanın kısaltması olarak x değeri veriliyor.
- 15:14Koordinat ve Renk Tanımlama
- Koordinatında sıfırdan başlayıp yüzde yüz'e doğru ilerleme yapılıyor.
- "stop" adlı bir etiket oluşturulup, offset değeri veriliyor.
- Dark olive green yerine URL olarak renk tanımlaması yapılıyor.
- 16:06Opacity Geçişleri
- Sadece x düzleminde opacity değeri 0,60'dan 1'e doğru geçiş yapılıyor.
- Bu yöntemle logo tarzı tasarımlar yapılabilir.