HTML canvas bezierCurveTo() Yöntemi
Örnek
Kübik bir Bézier 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();
Tarayıcı Desteği
Internet Explorer 9, Firefox, Opera, Chrome ve Safari bezierCurveTo() yöntemini destekler.
Tanım ve Kullanım
bezierCurveTo() yöntemi, kübik bir Bézier eğrisini temsil eden belirtilen kontrol noktalarını kullanarak geçerli yola bir nokta ekler.
Bir kübik bezier eğrisi üç nokta gerektirir. İlk iki nokta, kübik Bézier hesaplamasında kullanılan kontrol noktalarıdır ve son nokta, 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.
Başlangıç noktası
Taşı( 20,20 )
Kontrol noktası 1
bezierCurveTo( 20,100 ,200,100,200,20)
Kontrol noktası 2
bezierCurveTo(20,100, 200,100 ,200,20)
bitiş noktası
bezierCurveTo(20,100,200,100, 200,20 )
İpucu: quadraticCurveTo() yöntemini kontrol edin . İki yerine bir kontrol noktası vardır.
| JavaScript sözdizimi: | bağlam .bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ); |
|---|
Parametre Değerleri
| Parameter | Description | Play it |
|---|---|---|
| cp1x | The x-coordinate of the first Bézier control point | |
| cp1y | The y-coordinate of the first Bézier control point | |
| cp2x | The x-coordinate of the second Bézier control point | |
| cp2y | The y-coordinate of the second Bézier control point | |
| x | The x-coordinate of the ending point | |
| y | The y-coordinate of the ending point |
❮ HTML Kanvas Referansı