HTML canvas bezierCurveTo() yöntemi
Tanım ve Kullanım
bezierCurveTo() yöntemini kullanarak belirtilen kontrol noktalarını içeren üçlü Bezier eğrisini temsil eden bir nokta ekleyin.
İpucu:Üçlü Bezier eğrisi üç noktaya ihtiyaç duyar. İlk iki nokta üçlü Bezier hesaplamasında kontrol noktalarıdır, üçüncü nokta eğrinin bitiş noktasıdır. Eğrinin başlangıç noktası mevcut yoldaki en son noktadır. Yol mevcutsa değilse, lütfen beginPath() ve moveTo() yöntemi ile başlangıç noktasını tanımlayın.
- Başlangıç noktası: moveTo(
20,20) - Kontrol noktası 1: bezierCurveTo(
20,100,200,100,200,20) - Kontrol noktası 2: bezierCurveTo(20,100,
200,100,200,20) - Son nokta: bezierCurveTo(20,100,200,100,
200,20)
İpucu:Bakınız: quadraticCurveTo() yöntemi。Onun kontrol noktası iki değil bir tane.
Örnek
Üçlü Bezier eğrisi çizin:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
Sözdizimi
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
Parametre Değeri
| Parametre | Açıklama |
|---|---|
| cp1x | İlk 贝塞尔 kontrol noktasının x koordinatı. |
| cp1y | İlk 贝塞尔 kontrol noktasının y koordinatı. |
| cp2x | İkinci 贝塞尔 kontrol noktasının x koordinatı. |
| cp2y | İkinci 贝塞尔 kontrol noktasının y koordinatı. |
| x | Bitiş noktasının x koordinatı. |
| y | Bitiş noktasının y koordinatı. |
Tarayıcı Desteği
Tabloda numaralar, 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.
