HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

<canvas> Etiketimiz İçinde Çizim Yollarını Belirlemek için Hemen Örneğimize Geçelim
İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım.
<canvas id="resimalani2" width="500" height="500" style="border:1px solid #000000"></canvas>
Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor. JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız.
width=”” height=”” style=”” ile Klasik Boyutlandırmaları Oluşturduk.
</canvas> alanımızı kapattık ve bundan sonra JavaScrip İle yazacağımız kodlarımızı hemen altında devam edeceğiz.
<script> var c = document.getElementById("resimalani2"); var ctx = c.getContext("2d"); ctx.moveTo(10,20); ctx.lineTo(400,450); ctx.stroke(); </script>
canvas etiketimizin altında oluşturduğumuz script etiketlerinin içinde şu tanımlamaları yaptık..
var c = document.getElementById(“resimalani2”); Komutumuz İle id si resimalani2 olan canvas alanında çalışma yapacağımızı belirttik.
var ctx = c.getContext(“2d”); Komutumuz İle Alanda Bir Nesne Oluşturacağımızı Belirttik.
ctx.moveTo(10,20); Komutumuz İle Çizimimizin Başlangıç Yolunu belirledik.
10 : Soldan Sağa 10px. ile başlamasını tanımladık.
20 : Yukarıdan Aşağıya 20px. ile başlamasını tanımladık.
ctx.lineTo(400,450); Komutumuz İle Çizimimizin Bitiş Noktasını Tanımladık
400 : Soldan Sağa Doğru 400px. de bitimini tanımladık.
450 : Yukarıdan Aşağıya 450px. de bitimini tanımladık.
ctx.stroke(); Komutumuz ile bunun bir başlangıç ve bitiş kordinatlarının olacağı bir çizği olacağını tanımladık.