Şekil Çizimleri
Çizgi:
- İlk olarak bir çizgi ile başlayalım.
- Bir çizgi oluşturabilmek için lineTo fonksiyonunukullanırız.
- lineTo fonksiyonu iki parametre alır.
- Bu parametreler sırasıyla x ve y koordinatlarıdır.
- lineTo fonksiyonu bulunulan noktadan verilenkoordinatlara bir çizgi çizer.
- Aşağıda örnek kodu verip sonra açıklayalım.
<canvas id=“canvasim” width=“200”> height=“200”></canvas> <script>
var canvas=document.getElementById(‘canvasim’);var baglam=canvas.getContext(‘2d’);
baglam.beginPath(); baglam.moveTo(50,150); baglam.lineTo(150,50); baglam.stroke();
</script>
- Yukarıda kod parçasında ilk önce bağlam(context)nesnesini aldık.
- beginPath fonksiyonu ile yeni bir şekle başladık.
- moveTo fonksiyonu ile çizime başlayacağımızkoordinatları belirledik.
- İlk parametre x (50),ikici parametre y (150) koordinatıdır.
- lineTo fonksiyonu ile bulunulan koordinattan parametreolarak girilen (150,50) koordinatına bir çizgi çizdik.
- En son ise stroke fonksiyonu ile şeklin sınırlarını siyah ile boyadık ve karşımıza şekildeki çizgi çıktı.
• Ayrıca stroke fonksiyonunu çağırmadanlineWidth özelliği ile çizgimizin kalınlığınıayarlayabiliriz.
• Çizgimizin rengini belirlemek için isestrokeStyle özelliğini kullanabiliriz.
• Aşağıdaki örnekte bu özelliklerin nasıl kullanıldığını görebiliriz.
<canvas id=“canvasim” width=“200” height=“200”></canvas> <script>
var canvas =document.getElementById(‘canvasim’);var baglam =canvas.getContext(‘2d’);
baglam.beginPath(); baglam.moveTo(50,150); baglam.lineTo(150,50); baglam.lineWidth=19;
baglam.strokeStyle=‘#CCCCCC’;
baglam.stroke(); </script>
