Canvas quadraticCurveTo() Metodu

Tanım ve Kullanım

quadraticCurveTo() metodu kullanarak belirtilen kontrol noktasını içeren ikinci dereceden Bezier çizgisini mevcut yola ekleyin.

İpucu:İkinci dereceden Bezier çizgisi iki noktaya ihtiyaç duyar. İlk nokta, ikinci dereceden Bezier hesaplamasında kullanılan kontrol noktasıdır, ikinci nokta ise çizginin bitiş noktasıdır. Çizginin başlangıç noktası, mevcut yolda en son noktadır. Yol yoksa, lütfen beginPath() ve moveTo() metodu ile başlangıç noktasını tanımlayın.

İkinci Bezier Çizgisi
  • Başlangıç noktası: moveTo(20,20)
  • Kontrol noktası: quadraticCurveTo(20,100,200,20)
  • Bitiş noktası: quadraticCurveTo(20,100,200,20)

İpucu:Bakınız bezierCurveTo() metoduBu, bir değil iki kontrol noktasına sahiptir.

Örnek

Bir ikinci dereceden Bezier çizgisi çizin:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

Kendi kendine deneyin

Sözdizimi

context.quadraticCurveTo(cpx,cpy,x,y);

Parametre değeri

Parametre Açıklama
cpx Bezier kontrol noktasının x koordinatı.
cpy Bezier kontrol noktasının y koordinatı.
x Bitiş noktasının x koordinatı.
y Bitiş noktasının y koordinatı.

Tarayıcı desteği

Tablodeki rakamlar, bu özelliği tam destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> ögesini desteklememektedir.