Embedded Files
Hazırlayan: Muammer Çelik
Nedir ?
HTML canvas etiketi, web sayfasına görsel ögeler eklemek için kullanılan bir HTML etiketidir. Canvas etiketi, belirli bir boyuta sahip bir çizim alanı oluşturur ve JavaScript kullanarak bu alanda görsel nesneler çizmemize izin verir.
Ne İşe Yarar ?
HTML Canvas etiketi, web geliştiricilerine web sayfalarına canlı ve interaktif görsel öğeler eklemelerine imkan tanıyan bir araçtır. Bu etiket sayesinde, grafikler, çizimler, animasyonlar, oyunlar ve daha birçok şey oluşturulabilir.
Nasıl Kullanılır ?
Canvas etiketi, HTML sayfasında bir element olarak tanımlanır ve herhangi bir CSS stiliyle şekillendirilebilir. Canvas etiketinde boyut belirlemek için width ve height etiketileri ile mümkündür. Örneğin, 500 piksel genişliğinde ve 300 piksel yüksekliğinde bir kanvas etiketi oluşturmak için yukarıdaki görselde bulunan kodu kullanabilirsiniz.
Bu kod, 500 piksel genişliğinde ve 300 piksel yüksekliğinde bir kanvas etiketi oluşturur. Bu etikete "mycanvas" id' si atanır, bu sayede JavaScript'te bu kanvası seçmek için kullanılabilir.
Canvas etiketini kullanarak çizim yapmak için, kanvas etiketinin getContext() yöntemi kullanılır. getContext() yöntemi, belirli bir çizim bağlamı oluşturur (2D veya 3D) ve bu bağlamı kullanarak çizim işlemini gerçekleştirebilirsiniz. Örneğin yukardaki kod bir 2d çizim bağlamı oluşturur ve kanvas üzerinde bir kare çizer. Bu kod, canvas etiketini "myCanvas" id'siyle seçer ve bir 2D çizim bağlamı oluşturur. Sonra, fillRect() yöntemi kullanılarak canvas üzerinde bir kare çizilir. fillRect() yöntemi, x ve y koordinatları ile birlikte karenin genişliğini ve yüksekliğini belirtir.
ŞEKİL ÖRNEKLERİ
DİKDÖRTGEN ÇİZİMİ
Yandaki kod canvas etiketini "myCanvas" id'siyle seçer, bir 2D çizim bağlamı oluşturur ve bir dikdörtgen çizer. rect() yöntemi, dikdörtgenin x ve y koordinatları ile birlikte genişliğini ve yüksekliğini belirler. fillStyle özelliği, dikdörtgenin dolgu rengini belirler ve fill() yöntemi, dikdörtgeni doldurmak için kullanılır.
ÜÇGEN ÇİZİMİ
Bu kod, canvas etiketini "myCanvas" id'siyle seçer, bir 2D çizim bağlamı oluşturur ve bir üçgen çizer. moveTo() yöntemi, üçgenin başlangıç noktasını belirler ve lineTo() yöntemi, diğer iki noktayı belirler. closePath() yöntemi, üçgenin son noktasını başlangıç noktasına bağlar. fillStyle özelliği, üçgenin dolgu rengini belirler ve fill() yöntemi, üçgeni doldurmak için kullanılır. strokeStyle özelliği, üçgenin kenar rengini belirler ve stroke() yönt emi, üçgenin kenarlarını çizmek için kullanılır. Bu örnekte, fillStyle özelliği mavi olarak ayarlanmış ve fill() yöntemi kullanılarak üçgen doldurulmuştur. strokeStyle özelliği mor olarak ayarlanmış ve stroke() yöntemi kullanılarak üçgenin kenarları çizilmiştir.
DAİRE ÇİZİMİ
Bu kod, canvas etiketini "myCanvas" id'siyle seçer, bir 2D çizim bağlamı oluşturur ve bir daire çizer. arc() yöntemi, x ve y koordinatları ile birlikte dairenin yarıçapını ve açıları belirler. fillStyle özelliği, dairenin dolgu rengini belirler ve fill() yöntemi, daireyi doldurmak için kullanılır. strokeStyle özelliği, dairenin kenar rengini belirler ve stroke() yöntemi, dairenin kenarlarını çizmek için kullanılır.
HTML Canvas etiketi, web sayfalarına canlı, dinamik görsel öğeler eklemek için harika bir araçtır. JavaScript kullanarak canvas üzerinde çizim yapabilir, animasyonlar oluşturabilir ve etkileşimli uygulamalar geliştirebilirsiniz.
Page updated
Report abuse