Canvas quadraticCurveTo() methode
Definitie en gebruik
quadraticCurveTo() methode om een punt toe te voegen aan het huidige pad met behulp van de specifieke knop van de kwadratische Bezier-kromming.
Tip:Een kwadratische Bezier-kromming vereist twee punten. De eerste is de knop voor de kwadratische Bezier-berekening, de tweede is het einde van de kromming. Het startpunt van de kromming is de laatste punt in het pad. Als er geen pad is, gebruik dan beginPath() en moveTo() methode om het startpunt te definiëren.
- Startpunt: moveTo(
20,20) - Knop: quadraticCurveTo(
20,100,200,20) - Eindpunt: quadraticCurveTo(20,100,
200,20)
Tip:Bekijk ook bezierCurveTo() methodeHet heeft twee knoppen in plaats van één.
Voorbeeld
Teken een kwadratische Bezier-kromming:
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();
Syntax
context.quadraticCurveTo(cpx,cpy,x,y);
Parameterwaarde
| Parameter | Beschrijving |
|---|---|
| cpx | De x-coördinaat van de Bezier-knop. |
| cpy | De y-coördinaat van de Bezier-knop. |
| x | De x-coördinaat van het einde. |
| y | De y-coördinaat van het einde. |
Browserondersteuning
Tafelnummers vermelden de versie van de browser die de eigenschap volledig ondersteunt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
