HTML reference manual

HTML tag list

HTML canvas quadraticCurveTo() method

quadraticCurveTo() is a Canvas 2The D API has added a method for quadratic Bezier curve paths. It requires2a point. The first point is the control point, and the second point is the end point. The starting point is the latest point on the current path, and you can change it using the moveTo() method before creating a quadratic Bezier curve.

Manual de referência do canvas HTML

Online example

Draw a quadratic Bezier curve:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas bezierCurveTo() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
</script>　
</body>
</html>

Test to see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome and Safari support quadraticCurveTo() Method.

Note:Internet Explorer 8 Previous versions do not support the <canvas> element.

Definição e uso

O método quadraticCurveTo() adiciona um ponto ao caminho atual usando os pontos de controle especificados para a curva quadrática Bezier.

A curva quadrática Bezier precisa de dois pontos. O primeiro ponto é o ponto de controle usado no cálculo Bezier quadrático, e o segundo ponto é o ponto final da curva. O ponto de início da curva é o último ponto do caminho atual. Se o caminho não existir, use beginPath() e moveTo() Método para definir o ponto de início.

Ponto de início:

moveTo(20,20)

Ponto de controle:

quadraticCurveTo(20,100,200,20)

Ponto final:

quadraticCurveTo(20,100,200,20)

Dica:Ver bezierCurveTo() Método. Ele tem dois pontos de controle, não um.

Sintaxe JavaScript:	context.quadraticCurveTo(cpx,cpy,x,y);

Valor do parâmetro

Parâmetro	Descrição
cpx	Coordenada x do ponto de controle Bezier.
cpy	Coordenada y do ponto de controle Bezier.
x	Coordenada x do ponto final.
y	Coordenada y do ponto final.

Manual de referência do canvas HTML

HTML: <template> tag