Canvas elementi
canvas öğesini ve 2D çizim bağlamını (context) nasıl alacağını öğrenirsin.
Canvas elementi
Canvas, JavaScript ile piksel tabanlı çizim yapabileceğin bir HTML öğesidir. Bir canvas etiketi tuvalin yerini tutar; genişlik ve yükseklik öznitelikleriyle boyutu belirlenir.
Çizim için önce öğeyi seçer, sonra getContext('2d') çağrısıyla iki boyutlu çizim bağlamını alırsın. Bu bağlam üzerinde dikdörtgen, çizgi, yay ve metin çizebilir, renkleri ayarlayabilirsin. Tüm çizim yöntemleri bu bağlam üzerinden çalışır.
Bağlamı almak
Canvas'ta çizim yapmak için iki adım gerekir. Önce document.getElementById ile öğeyi seçer, sonra getContext('2d') ile çizim bağlamını alırsın.
Bağlam, çizim yöntemlerini ve çizim durumunu (renk, çizgi kalınlığı) tutar. Genellikle ctx adlı bir değişkene atanır. Bağlam olmadan canvas boş bir kare olarak kalır; tüm çizim bu bağlam üzerinde yapılır.
Uygulama Canvas ve bağlam al
document.getElementById('canvas') ile canvas öğesini seç, getContext('2d') ile 2D çizim bağlamını al ve console.log ile bağlamı yazdır. Bağlamı ctx değişkenine ata.
Örnek çözümü göster
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
console.log(ctx);Kendini test et
-
2D çizim bağlamını hangi çağrı verir?
const canvas = document.getElementById('canvas');- canvas.getContext('canvas')
- canvas.getContext('2d')
- canvas.getContext('webgl')
- canvas.getContext('drawing')
Cevabı göster
canvas.getContext('2d') — Doğru! '2d' argümanı iki boyutlu çizim bağlamını döndürür.
-
Bağlamı al
const canvas = document.getElementById('canvas'); const ctx = canvas.____('2d');Cevabı göster
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); -
Canvas terimlerini eşleştir
- canvas
- HTML öğesi
- getContext
- bağlam al
- '2d'
- iki boyutlu
- ctx
- çizim bağlamı