HTML canvas quadraticCurveTo() yöntemi
Tanım ve Kullanım
quadraticCurveTo() yöntemini kullanarak belirtilen kontrol noktasını içeren ikinci dereceden Bezier çizgisi olarak bir nokta 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 yoldaki son noktadır. Yol mevcutsa değilse, lütfen beginPath() ve moveTo() yöntemini kullanarak tanımlayın.
- Başlangıç noktası: moveTo(
20,20) - Kontrol noktası: quadraticCurveTo(
20,100,200,20) - Bitiş noktası: quadraticCurveTo(20,100,
200,20)
İpucu:Aşağıdaki adımları kontrol edin: bezierCurveTo() yöntemi。Bu, bir değil iki kontrol noktasına sahiptir.
Örnek
İki katsayılı bir ikinci dereceden Bezier çizgisi çizin:
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();
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
Tablodaki rakamlar, bu özelliği tam olarak 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> elementini desteklememektedir.
