- Konu sahibi
- #1
HTML’de
Çizim yapmak için önce canvas düğümü seçilir, ardından bir çizim bağlamı alınır. En yaygın seçenek
Aşağıdaki dosyayı
Başarılı sonuçta sayfada 320 × 180 piksel çizim alanı ve içinde mavi bir dikdörtgen görünür. Hiçbir şey görünmüyorsa tarayıcının geliştirici araçlarındaki Console bölümünde hata olup olmadığını kontrol edin; özellikle
Canvas; sürekli değişen grafikler, piksel düzenleme, çizim uygulamaları, oyunlar, imza alanları ve animasyonlar için uygundur. Çizim komutları çalıştırıldıktan sonra ortaya çıkan şekiller, normal HTML düğümleri gibi ayrı ayrı DOM nesneleri hâline gelmez. Bu nedenle çizilmiş bir dikdörtgeni CSS seçicisiyle seçemez veya metnini doğrudan ekran okuyucuya aktaramazsınız.
Aşağıdaki ayrım seçim yapmayı kolaylaştırır:
Canvas kullanırken erişilebilirlik için yalnızca çizimi üretmekle yetinmeyin.
Canvas etiketi JavaScript olmadan boş bir alan olarak görüntülenebilir. Ancak çizim, animasyon veya grafik oluşturmak için pratikte JavaScript ya da canvas API’sini kullanan başka bir betik gerekir.
Evet.
<canvas>, JavaScript kullanarak tarayıcı içinde piksel tabanlı 2B çizimler, grafikler, animasyonlar ve basit oyun sahneleri oluşturmanızı sağlayan çizim alanıdır. HTML etiketi yalnızca yüzeyi tanımlar; çizimin kendisi genellikle getContext("2d") ile alınan JavaScript çizim bağlamı üzerinden yapılır. Etiketin içine, çizimi göremeyen kullanıcılar için açıklayıcı alternatif içerik eklemek gerekir.Canvas nasıl çalışır?
<canvas> başlangıçta boş bir bitmap alanı oluşturur. width ve height öznitelikleri bu çizim alanının gerçek boyutunu belirler. Bu değerler yazılmazsa varsayılan çizim alanı 300 × 150 piksel olur. CSS ile görünen boyutu değiştirebilirsiniz; ancak CSS boyutu ile gerçek çizim boyutu farklı oranlardaysa görüntü bulanıklaşabilir veya esneyebilir.Çizim yapmak için önce canvas düğümü seçilir, ardından bir çizim bağlamı alınır. En yaygın seçenek
2d bağlamıdır. Örneğin fillRect() bir dikdörtgeni doğrudan çizer; koordinat sisteminin başlangıç noktası canvas’ın sol üst köşesidir.Çalışan en küçük örnek
Aşağıdaki dosyayı
index.html adıyla kaydedip tarayıcıda açabilirsiniz:
HTML:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Canvas örneği</title>
</head>
<body>
<canvas id="renkli-alan" width="320" height="180" role="img"
aria-label="Mavi bir dikdörtgen çizimi">
Renkli bir dikdörtgen çizimi gösterilmektedir.
</canvas>
<script>
const canvas = document.querySelector("#renkli-alan");
const ctx = canvas.getContext("2d");
if (!ctx) {
throw new Error("2D canvas bağlamı alınamadı.");
}
ctx.fillStyle = "steelblue";
ctx.fillRect(40, 30, 240, 120);
</script>
</body>
</html>Başarılı sonuçta sayfada 320 × 180 piksel çizim alanı ve içinde mavi bir dikdörtgen görünür. Hiçbir şey görünmüyorsa tarayıcının geliştirici araçlarındaki Console bölümünde hata olup olmadığını kontrol edin; özellikle
canvas seçicisinin doğru kimliği kullandığını ve getContext("2d") sonucunun null olmadığını doğrulayın. Canvas öğesi sayfada bulunmadan JavaScript çalıştırılırsa canvas değeri null olabilir.Canvas ne zaman tercih edilir?
Canvas; sürekli değişen grafikler, piksel düzenleme, çizim uygulamaları, oyunlar, imza alanları ve animasyonlar için uygundur. Çizim komutları çalıştırıldıktan sonra ortaya çıkan şekiller, normal HTML düğümleri gibi ayrı ayrı DOM nesneleri hâline gelmez. Bu nedenle çizilmiş bir dikdörtgeni CSS seçicisiyle seçemez veya metnini doğrudan ekran okuyucuya aktaramazsınız.
Aşağıdaki ayrım seçim yapmayı kolaylaştırır:
| İhtiyaç | Daha uygun seçenek | Temel neden |
|---|---|---|
| Piksel tabanlı animasyon veya oyun | Canvas | Çizim komutlarıyla bitmap yüzeyini güncelleme |
| Seçilebilir metin ve bağımsız şekiller | SVG veya HTML | Öğeler DOM içinde ayrı ayrı yönetilebilir |
| Basit statik fotoğraf veya görsel | img | Alternatif metin ve içerik sunumu daha doğrudandır |
<canvas> içinde çizimin ne anlattığını açıklayan metin veya uygun bir alternatif sunun. Etkileşimli bir uygulamada klavye kullanıcıları için HTML düğmeleri, formlar veya başka erişilebilir kontroller de sağlayın.Uygulamada dikkat edilecek kararlar
- Gerçek çizim çözünürlüğünü
widthveheightöznitelikleriyle belirleyin; yalnızca CSS ile boyutlandırmayın. - Çizim türünüzü seçin: 2B işlemler için
getContext("2d"), 3B grafikler için WebGL tabanlı bağlamlar kullanılır. - Canvas içeriğinin erişilebilir olmadığını varsayın ve anlamlı alternatif içerik ekleyin.
- Animasyonu tarayıcının çizim döngüsüne uygun
requestAnimationFrame()ile planlayın; gereksiz büyük canvas alanlarından kaçının. - Canvas boyutunu değiştirdiğinizde mevcut çizimin temizlenebileceğini hesaba katın; boyut ayarını çizimden önce yapın.
Sık sorulan sorular
Canvas için JavaScript zorunlu mudur?
Canvas etiketi JavaScript olmadan boş bir alan olarak görüntülenebilir. Ancak çizim, animasyon veya grafik oluşturmak için pratikte JavaScript ya da canvas API’sini kullanan başka bir betik gerekir.
Canvas çizimini PNG olarak alabilir miyim?
Evet.
toDataURL("image/png") gibi API’lerle görüntü temsili alınabilir; bu çağrı tek başına dosyayı kullanıcının diskine kaydetmez. İzin verilmeden başka originden alınan görüntüler canvas’a çizilmişse güvenlik nedeniyle dışa aktarma engellenebilir. Büyük görüntülerde bellek kullanımını da değerlendirin.