Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Fehmi Uyar tarafından sunulan HTML5 Canvas eğitim setinin 21. dersi olup, grafik çizimi konusunda bilgiler içermektedir.
- Videoda öncelikle JavaScript kullanarak canvas üzerinde gradient renklendirme yöntemleri anlatılmakta, doğrusal ve dairesel gradient oluşturma teknikleri gösterilmektedir. Daha sonra Fireworks programında grafik çizimi için temel komutlar, koordinat sistemi ve "stroke" komutu kullanılarak düz çizgiler çizme teknikleri adım adım açıklanmaktadır.
- Eğitmen, kod örnekleri üzerinden pratik bilgiler sunmakta ve izleyicilere evde kendi grafiklerini çizmeleri için pratik yapmaları tavsiyesiyle videoyu sonlandırmaktadır.
- 00:09HTML5 Kanvasları ve Gradient Renkler
- HTML5 kanvasları serisinin 21. dersinde gradient renkleri (farklı renklendirme yöntemleri) işlenecek.
- Geçen derste grafiklerde metin yapma gösterilmişti, bu derste ise doğrudan kanvas üzerinden işlem yapılacak.
- Content olayına gerek kalmadan, doğrudan kanvas üzerinde iki boyutlu işlemler yapılacak.
- 00:58Doğrusal Gradient Oluşturma
- Gradient renk oluşturmak için "createLinearGradient" fonksiyonu kullanılır ve ilk harfler büyük yazılır.
- Doğrusal gradient için x koordinatları kullanılır; x1 ve x2 değerleri arasında renk değişimi gerçekleşir.
- Y koordinatları sabit tutulur, böylece sadece soldan sağa veya sağdan sola kayan renk değişimi sağlanır.
- 03:05Gradient Renk Değişimi
- Gradient değişkenine "addColor" fonksiyonu ile renk eklenir ve stop değeri 0'dan 1'e kadar değişen bir değer alır.
- Kırmızıdan yeşile veya kırmızıdan siyaha gibi farklı renk geçişleri yapılabilir.
- Koordinat değerleri değiştirilerek (örneğin 450'den 0'a) renk geçişi yönü değiştirilebilir.
- 06:06Dairesel Gradient Oluşturma
- Dairesel (yuvarlak) gradyan renklendirme için "createCircularGradient" fonksiyonu kullanılır.
- Dairesel gradient için x koordinatı, y koordinatı ve yarıçap değerleri gerekir.
- Dairesel gradyanda renk içerden dışarıya doğru değişir, ancak koordinat değerleri doğru ayarlanmadığında beklenen sonuç elde edilemez.
- 09:31Grafikte Resim Ekleme
- Grafikte resim ekleme için "picture" adında bir değişken tanımlanır.
- "new Image" fonksiyonu ile yeni bir image nesnesi oluşturulur.
- "picture" değişkeni sayfa yüklendiğinde (onLoad) "drawImage" fonksiyonu ile çizmeye başlar.
- 10:08Grafik Oluşturma ve Kaynak Gösterme
- Resim nesnesi at içerisine yerleştirilmiş ve kaynak olarak image graphic.png dosyası kullanılmıştır.
- Grafik Fireworks programında çizilmiş olup internetten bulunmamıştır.
- Diğer derslerde yapılan komutlar kullanılarak güzel bir örnek oluşturulmuştur.
- 10:50Çizgi Çizimi ve Koordinat Kullanımı
- Yeni bir yol çizilerek kalınlığı üç olarak ayarlanmıştır.
- Çizginin rengi stroke style komutuyla belirlenmiştir.
- Koordinatlar kullanılarak çizgi çizimi yapılmıştır: x=121, y=258 noktasından başlayıp, x koordinatı sabit tutularak aşağıdan yukarıya çizgi çizilmiştir.
- 12:10Grafik Şeklinin Oluşturulması
- Yeni bir çizgi çizilerek başlangıç noktası x=121, y=258 olarak belirlenmiştir.
- X değeri sabit tutularak y değeri değiştirilerek grafik şekli oluşturulmuştur.
- X değeri sağa doğru arttıkça y değeri küçülerek artan bir grafik şekli oluşturulmuştur.
- 13:47Grafik Çiziminin Önemi
- Grafik çiziminin mantığını öğrenmek önemlidir çünkü yazılıma otomatik yaptırılabilir.
- Koordinat değerlerine alışmak için pratik yapmak gerekir.