CanvasRenderingContext2D.quadraticCurveTo()
o método CanvasRenderingContext2D.quadraticCurveTo()
da API Canvas 2D adiciona uma Curva de Bézier quadrática ao caminho. São exigidos dois pontos. O primeiro ponto é um ponto de controle e o segundo é o ponto final. The starting point is the last point in the current path, which can be changed using moveTo()
before creating the quadratic Bézier curve.
Sintaxe
void ctx.quadraticCurveTo(cpx, cpy, x, y);
Parâmetros
cpx
-
O eixo X da coordenada para o ponto de controle.
cpy
-
O eixo Y da coordenada para o ponto de controle.
x
-
O eixo X da coordenada para o ponto final.
y
-
O eixo Y da coordenada para o ponto final.
Exemplos
Usando o método quadraticCurveTo
This is just a simple code snippet drawing a quadratic bezier curve. The control point is red and the start and end points are blue.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();
ctx.fillStyle = 'blue';
// start point
ctx.fillRect(50, 20, 10, 10);
// end point
ctx.fillRect(50, 100, 10, 10);
ctx.fillStyle = 'red';
// control point
ctx.fillRect(230, 30, 10, 10);
Trying the quadraticCurveTo
parameters
Edit the code below and see your changes update live in the canvas:
Especificações
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.quadraticCurveTo' in that specification. |
Padrão em tempo real |
Compatibilidade com navegadores
BCD tables only load in the browser
Veja também
- The interface defining it,
CanvasRenderingContext2D
- WikiPedia article on Bézier curves.