HTML Canvas Yumuşak Çizgi

Örnek

Tarayıcınız HTML5 canvas etiketini desteklemiyor.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 50, 50, 0, Math.PI);
ctx.stroke();

Deneyin

arc() yöntemi

Dairesel kısm, merkezi koordinatlar ve yarıçapla tanımlanan bir kısmıdır:

Açılı Angiller

Canvas çizgi çizimi

Kanvasdaki yolu kullanarak çizgiyi çizin:

Yöntem Açıklama Çiz
beginPath() Bir yol başlat. Hayır
arc() Yol tanımla. Hayır
stroke() Çizim yap. Evet

Kanvas üzerinde dairesel bir çizim yapmak için aşağıdaki yöntemi kullanın:

  • beginPath() - Yol başlat
  • arc(x,y,r,start,end) - Çemberi tanımla
  • stroke() - Çiz

arc(x,y,r,start,end) - Dairesel kısmı (çizgi).

Çember oluşturmak için, başlangıç açısını 0, bitiş açısını 2 * Math.PI olarak ayarlayın.

x ve y parametreleri, çemberin merkezinin koordinatlarını tanımlar.

r parametresi, çemberin yarıçapını tanımlar.

Ayrıca bkz:

CodeW3C.com'nun Tam Canvas Referans Kılavuzu