HTML tuvali quadraticCurveTo() Yöntemi

❮ HTML Kanvas Referansı

Örnek

İkinci dereceden bir Bézier eğrisi çizin:

TarayıcınızHTML5tuval etiketini desteklemiyor.

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();

Tarayıcı Desteği

Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Method
quadraticCurveTo() Yes 9.0 Yes Yes Yes

Tanım ve Kullanım

quadraticCurveTo() yöntemi, ikinci dereceden bir Bézier eğrisini temsil eden belirtilen kontrol noktalarını kullanarak geçerli yola bir nokta ekler.

İkinci dereceden bir Bézier eğrisi iki nokta gerektirir. İlk nokta, ikinci dereceden Bézier hesaplamasında kullanılan bir kontrol noktası ve ikinci nokta ise eğrinin bitiş noktasıdır. Eğrinin başlangıç ​​noktası, mevcut yoldaki son noktadır. Bir yol yoksa, bir başlangıç ​​noktası tanımlamak için beginPath() ve moveTo() yöntemlerini kullanın.

İkinci dereceden bir Bézier eğrisi

Başlangıç ​​noktası:
Taşı( 20,20 )
Kontrol noktası:
kuadratikEğriTo ( 20,100 , 200,20)
Bitiş noktası:
ikinci dereceden Eğri (20,100, 200,20 )

İpucu: bezierCurveTo() yöntemini kontrol edin . Bir yerine iki kontrol noktası vardır.


JavaScript sözdizimi: bağlam .quadraticCurveTo ( cpx,cpy,x,y );

Parametre Değerleri

Parameter Description Play it
cpx The x-coordinate of the Bézier control point
cpy The y-coordinate of the Bézier control point
x The x-coordinate of the ending point
y The y-coordinate of the ending point

❮ HTML Kanvas Referansı