HTML Reference Manual

HTML tag大全

HTML canvas quadraticCurveTo() method

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

Manual de referencia de 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.

Definición y uso

El método quadraticCurveTo() añade un punto a la trayectoria actual utilizando los puntos de control especificados para la curva cuadrática Bézier.

Una curva cuadrática necesita dos puntos. El primer punto es el punto de control utilizado en el cálculo cuadrático Bézier, y el segundo punto es el punto final de la curva. El punto de inicio de la curva es el último punto de la trayectoria actual. Si no existe una trayectoria, utilice beginPath() y moveTo() Método para definir el punto de inicio.

Punto de inicio:

moveTo(20,20)

Punto de control:

quadraticCurveTo(20,100,200,20)

Punto final:

quadraticCurveTo(20,100,200,20)

Consejo:Ver bezierCurveTo() Método. Tiene dos puntos de control, en lugar de uno.

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

Valor del parámetro

Parámetros	Descripción
cpx	Coordenada x del punto de control de Bézier.
cpy	Coordenada y del punto de control de Bézier.
x	Coordenada x del punto final.
y	Coordenada y del punto final.

Manual de referencia de canvas HTML

HTML: <template> etiqueta