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ı

Sıradaki ders: Çizim koordinatları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler