HTML Canvas Şekiller

örnek

Örnek 1

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Kişisel olarak deneyin

Canvas çizgi çizimi

çizgi çizimi, canvas içindeki yolda yapılır:

metodu

beginPath() metodu yeni bir yol başlatır. Hiçbir şey çizmez, sadece yeni bir yol tanımlar.

moveTo() çizgi başlangıç noktasını tanımlar. Hiçbir şey çizmez, sadece bir başlangıç noktası ayarlar.

lineTo() metodu çizgi bitiş noktasını tanımlar. Hiçbir şey çizmez, sadece bir bitiş noktası ayarlar.

stroke() metodu gerçekten çizgileri çizer.Varsayılan çizim rengi siyah renktedir.

Daha fazla örnek

Örnek 2

ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();

Kişisel olarak deneyin

Örnek 3

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

Kişisel olarak deneyin

İpucu

daire çizmek için 4 çizgi çizmeniz gerekmez.

bir sonraki bölümde, bu kullanmayı öğreneceksiniz drawRect() metodu ile daire çizilir.

strokeStyle özelliği

strokeStyle özellik, çizim sırasında kullanılacak stili tanımlar.

çagrıldığında stroke() önce bu ayarı yapmanız gerekiyor.

örnek

ctx.beginPath();
// daire tanımlanıyor
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// üçgen tanımlanıyor
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "kırmızı";
ctx.stroke();

Kişisel olarak deneyin

Ayrıca bkz:

CodeW3C.com'nun Tam Canvas Referans Kılavuzu