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:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.moveTo(50,20);
ctx.quadraticCurveTo(230, 30, 50, 100);
ctx.stroke();</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

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.