HTML Canvas Çizim
- Önceki Sayfa Canvas Tanıtımı
- Sonraki Sayfa Canvas Koordinat
Çizim alanında JavaScript ile çizim
HTML çizim alanındaki tüm çizimler JavaScript ile tamamlanmalıdır:
Örnek
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
1. Adım: Canvas elementini bulun
Öncelikle, <canvas> elementini bulmanız gerekmektedir.
Bu, HTML DOM yöntemi getElementById() kullanılarak yapılır:
const canvas = document.getElementById("myCanvas");
2. Adım: Çizim nesnesi oluşturun
Ayrıca, bir çizim alanı çizim nesnesine ihtiyacınız olacaktır.
getContext() bir yerleşik HTML nesnesidir ve çizim için özellikler ve yöntemler sağlar:
const ctx = canvas.getContext("2d");
3. Adım: Çizim alanında çizim yapın
Son olarak, çizim yapabileceğiniz bir çizim alanı var.
Çizim nesnesinin doldurma stiliyi kırmızıya ayarlayın:
ctx.fillStyle = "#FF0000";
fillStyle özelliği CSS rengi, geçiş veya desen olabilir. Varsayılan fillStyle siyah renktedir.
fillRect(x,y,width,height) yöntemi, doldurma stili ile doldurulmuş bir düzeng çizir:
ctx.fillRect(0, 0, 150, 75);
Ayrıca bakınız:
- Önceki Sayfa Canvas Tanıtımı
- Sonraki Sayfa Canvas Koordinat
