Buradasın

HTML5 Canvas'ta Çember Çizme ve Metin Oluşturma Eğitimi

Yapay zekadan makale özeti

Bu video, HTML5 ve CSS3 eğitim setinin 20. dersi olup, bir eğitmen tarafından sunulan teknik bir eğitim içeriğidir.
Videoda HTML5 canvas elementi kullanılarak çember çizme ve metin oluşturma işlemleri adım adım gösterilmektedir. Eğitmen önce canvas üzerinde çember çizmek için arc() fonksiyonunu kullanarak x ve y koordinatları, yarıçap, açı değerleri ve çizim yönü (saat yönü/saat yönünün tersi) gibi parametreleri açıklar. Ardından metin oluşturma için font ayarları, fillText() ve strokeText() fonksiyonları ile metinlerin iç ve dış çizgilerini nasıl ayarlayabileceğiniz gösterilir.

00:09HTML Canvas'ta Çember Çizme: HTML 5 ve CSS 3 eğitim setinin 20. dersinde canvas'ta çember çizme ve metin oluşturma konuları ele alınacak.
Canvas alanı iki boyutlu olarak ayarlanır ve çemberin kalınlığı 4 olarak belirlenir.
Çember çizmek için JavaScript'te "arc" fonksiyonu kullanılır.
01:30Çember Çizim Parametreleri: Çember çiziminde x ve y koordinatları belirlenir, x koordinatı yukarıdan aşağıya, y koordinatı ise sağa doğru ilerler.
Çember çizmek için yarıçap, başlangıç açısı (0) ve bitiş açısı (2π) belirlenir.
"false" değeri saat yönünde, "true" değeri ise saat yönünün tersine çizim yapılmasını sağlar.
04:05Çember Çiziminde Açı Değerleri: Tam bir çember için başlangıç açısı 0, bitiş açısı 2π olarak belirlenir.
Yarım çember için başlangıç açısı 0, bitiş açısı π olarak belirlenir.
Çemberin herhangi bir bölümü için başlangıç ve bitiş açıları arasında değerler verilebilir.
08:12Metin Oluşturma: Metin oluşturma için önce font belirlenir (örneğin 32 piksel boyutunda Arial fontu).
"fillText" fonksiyonu ile metin çizilir ve x, y koordinatları belirlenir.
"strokeText" fonksiyonu ile dış çizgili metin oluşturulabilir ve "lineWidth" ile çizginin kalınlığı ayarlanabilir.