Exemplu
Se trasează o curbă Bezier cubi:
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(); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| bezierCurveTo() | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
bezierCurveTo() metoda adaugă un punct la calea curentă utilizând punctele de control specificate care reprezintă o curbă Bezier cubi.
O curbă Bezier cubică necesită trei puncte. Primele două puncte sunt puncte de control, care sunt utilizate în calculul Bezier cubi, iar ultimul punct este punctul final pentru curba. Punctul de plecare pentru curba este ultimul punct în calea curentă. În cazul în care o cale nu există, utilizați beginPath() și moveTo() metode pentru a defini un punct de plecare.
Punctul de inceput
moveTo( 20,20 ) Punct de control 1
bezierCurveTo( 20,100 ,200,100,200,20) Punctul de control 2
bezierCurveTo(20,100, 200,100 ,200,20) punct final
bezierCurveTo(20,100,200,100, 200,20 ) Tip: Check out quadraticCurveTo() metoda. Acesta are un punct de control în loc de doi.
| sintaxa JavaScript: | context . bezierCurveTo( cp1x,cp1y,cp2x,cp2y,x,y ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere | Joaca-l |
|---|---|---|
| cp1x | Coordonata X a primului punct de control Bezier | Joaca - l » |
| cp1y | Y coordonata a primului punct de control Bezier | Joaca - l » |
| cp2x | X coordonata al doilea punct de control Bezier | Joaca - l » |
| cp2y | Y-coordonata al doilea punct de control Bezier | Joaca - l » |
| x | X-coordonata punctului final | Joaca - l » |
| y | Y coordonata punctului final | Joaca - l » |