HTML Canvas Düzleri

örnek

// Çizim oluşturuldu:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Yeni bir yol tanımla:
ctx.beginPath();
// Başlangıç noktasını tanımla:
ctx.moveTo(0, 0);
// Son noktasını tanımla:
ctx.lineTo(200, 100);
// Çizim:
ctx.stroke();

Kendi kendine deneyin

Canvas çizgi çizimi

çizgi çizimi, canvas içindeki yoldan kullanılır:

yöntem

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

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

lineTo() yöntemi çizginin son noktasını tanımlar. Hiçbir şey çizmez, sadece bir son nokta ayarlar.

stroke() yöntemi gerçekten çizgiyi çizer. Varsayılan çizgi rengi siyah olmalıdır.

lineWidth özelliği

lineWidth özelliği, canvas üzerinde çizilirken kullanılacak çizgi genişliğini tanımlar.

Bu, stroke() yöntemini çağırmadan önce ayarlanmalıdır.

örnek

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Kendi kendine deneyin

strokeStyle özelliği

strokeStyle özelliği, canvas üzerinde çizilirken kullanılacak tarzı tanımlar.

Bu, stroke() yöntemini çağırmadan önce ayarlanmalıdır.

örnek

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Kendi kendine deneyin

lineCap özelliği

lineCap özelliği, çizginin ucunun tarzını (butt, round veya square) tanımlar.

Varsayılan olarak kare (kare) olmalıdır.

Bu, stroke() yöntemini çağırmadan önce ayarlanmalıdır.

örnek

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Kendi kendine deneyin

Ayrıca bakınız:

CodeW3C.com Tam Canvas Referans Kılavuzu