Exemplu
Se trasează o curbă Bezier pătratică:
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(); Încearcă - l singur » Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| quadraticCurveTo() | 4 | 9 | 3.6 | 4 | 10.1 |
Definiție și utilizare
quadraticCurveTo() metoda adaugă un punct la calea curentă utilizând punctele de control specificate care reprezintă o curbă Bezier pătratică.
O curbă Bezier pătratică necesită două puncte. Primul punct este un punct de control, care este utilizat în calculul Bezier pătratică și al doilea 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:
quadraticCurveTo( 20,100 ,200,20) Punct final:
quadraticCurveTo(20,100, 200,20 ) Tip: Check out bezierCurveTo() metoda. Acesta are două puncte de control-în loc de unul.
| sintaxa JavaScript: | context . quadraticCurveTo( cpx,cpy,x,y ) ; |
|---|
Valorile parametrilor
| Parametru | Descriere | Joaca-l |
|---|---|---|
| cpx | X-coordonata punctului de control Bezier | Joaca - l » |
| cpy | Y-coordonata punctului de control Bezier | Joaca - l » |
| x | X-coordonata punctului final | Joaca - l » |
| y | Y coordonata punctului final | Joaca - l » |