JavaScript ile canvas üzerinde çizgi çizme
Basitten başlayalım - çizgi çizmekle. Nasıl yapıldığını anlamak için, önünüzde bir kağıt ve kalem olduğunu hayal edin. Bu kağıt üzerine çizebilirsiniz veya çizmeden sadece kalemi istediğiniz noktaya taşıyabilirsiniz.
JavaScript de aynı şekilde çalışır: bir kalemi (veya çizim kalemi) vardır, istediğiniz yere moveTo metoduyla taşıyabilirsiniz ve çizmek için lineTo metodunu kullanabilirsiniz.
Her iki metod da parametre olarak kalemin ucunun taşınacağı noktayı alır - ilk parametre yatay koordinat, ikincisi ise dikey koordinattır. Koordinatların başlangıcı - 0, 0 noktası - elemanın sol üst köşesidir.
Kalem istenen noktaya taşındığında - moveTo metodu sadece taşır, lineTo ise taşınma sürecinde kalemin mevcut konumundan taşınacağı noktaya kadar bir çizgi çizer.
Ancak, yukarıdaki kodu çalıştırırsanız - hiçbir şey olmayacaktır: iki komut daha yazmak gerekir: beginPath komutu çizime başlamadan önce belirtilmelidir ve stroke komutu ise çizginin çizilmesi için tüm moveTo ve lineTo kombinasyonlarından sonra çağrılmalıdır.
Öyleyse, çizgi çizmek için çalışan bir kod yazalım:
Bir çizgi çizelim
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Bir kuş çizelim
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Bir üçgen çizelim
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Bir kare çizelim
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Şekilleri kapatma
Kapalı bir şekil çizmek için tüm çizgileri yapmak zorunda değilsiniz - son çizgi otomatik olarak çizilebilir ve şekli kapatabilir. Bunun için stroke metodundan önce closePath metodunu çağırmalısınız.
Bu metod, bitiş noktasından başlangıç noktasına düz bir çizgi çizerek şekli kapatmaya çalışır. Eğer şekil zaten kapalıysa veya sadece bir noktaysa, bu metod hiçbir şey yapmaz.
Hadi closePath kullanarak bir üçgen çizelim:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - bu adımı atlıyoruz
ctx.closePath();
ctx.stroke();
:
Şekilleri doldurma
stroke metodu yerine fill metodunu kullanabilirsiniz - bu durumda şeklin tamamen kapalı olması gerekmez - yine de doldurulacaktır:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - bu adımı atlıyoruz
//ctx.closePath(); - bunu da
ctx.fill();
:
