CanvasRenderingContext2D.quadraticCurveTo()

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

(Yes)
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
(Yes)
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Veja também

Etiquetas do documento e colaboradores

 Colaboradores desta página: ollieestuff
 Última atualização por: ollieestuff,