HTML Canvas Koordinat
- Önceki Sayfa Canvas Çizim
- Sonraki Sayfa Canvas Düz
Kanvas koordinatları
HTML kanvası iki boyutlu bir ağdır.
Kanvasın sol üst köşesi (0,0) koordinatlarıdır.
Önceki bölümde, fillRect(0,0,150,75) yöntemini kullandık.
Anlamı: Sağ üst köşeden (0,0) başlayarak 150x75 piksel genişliğinde bir daire çizin.
Koordinat örnekleri
Aşağıdaki矩形的 üzerine fareyi sürükleyerek x ve y koordinatlarını görebilirsiniz:
Çiz
Kanvas üzerinde çizgi çizmek için aşağıdaki yöntemleri kullanın:
- moveTo(x,y) - Çizginin başlangıç noktasını tanımlar
- lineTo(x,y) - Çizginin bitiş noktasını tanımlar
Gerçekten çizmek için 'Boyama' yöntemlerinden birini kullanmanız gerekmektedir, örneğin stroke().
Örnek
Başlangıç noktasını (0,0) olarak tanımlayın, bitiş noktasını (200,100) olarak tanımlayın. Daha sonra gerçekten çizmek için stroke() yöntemini kullanın:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Daire çiz
Kanvas üzerinde daire çizmek için aşağıdaki yöntemleri kullanın:
- beginPath() - Yeni bir yol başlat
- arc(x,y,r,startangle,endangle) - Daire çaprazı/çizgi
arc() ile bir daire oluşturmak için: Başlangıç açısını 0 olarak ayarlayın, bitiş açısını 2 * Math.PI olarak ayarlayın. x ve y parametreleri dairenin x ve y koordinatlarını tanımlar. r parametresi dairenin yarıçapını tanımlar.
Örnek
Küresel bir çizim tanımlamak için arc() yöntemini kullanın. Daha sonra gerçekten çizmek için stroke() yöntemini kullanın:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Ayrıca bkz:
- Önceki Sayfa Canvas Çizim
- Sonraki Sayfa Canvas Düz
