Canvas quadraticCurveTo() -menetelmä
Määrittely ja käyttö
quadraticCurveTo() menetelmää lisätäksesi nykyiseen polkuun piste, joka edustaa kaksinkertaista Bezier-kaarta.
Vinkki:Kaksinkertainen Bezier-kaari tarvitsee kaksi pistettä. Ensimmäinen piste on kontrollipiste kaksinkertaisessa Bezier-laskennassa, ja toinen piste on kaaren päätepiste. Kaaren aloituspiste on nykyisessä polussa viimeinen piste. Jos polku ei ole olemassa, käytä beginPath() ja moveTo() menetelmällä määritellään aloituspiste.
- Aloituspiste: moveTo(
20,20) - Kontrollipiste: quadraticCurveTo(
20,100,200,20) - Päätepiste: quadraticCurveTo(20,100,
200,20)
Vinkki:Tarkastele bezierCurveTo() -menetelmäSe on kaksi kontrollipistettä eikä yhtä.
Esimerkki
Riisuta yhden kertakäyttöisen Bezier-kaaren:
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();
Syntaksi
context.quadraticCurveTo(cpx,cpy,x,y);
Parametrin arvo
| Parametri | Kuvaus |
|---|---|
| cpx | Bezier-kontrollipisteen x-akselin arvo. |
| cpy | Bezier-kontrollipisteen y-akselin arvo. |
| x | Päätepisteen x-akselin arvo. |
| y | Päätepisteen y-akselin arvo. |
Selaimen tuki
Taulukossa olevat numerot osoittavat ensimmäisen täysin tukevan selaimen version.
| Chrome | Reuna | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Reuna | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Huomautus：Internet Explorer 8 ja aikaisemmat versiot eivät tue <canvas>-elementtiä.
