El método canvas quadraticCurveTo() se utiliza para crear una curva cuadrática en el lienzo. El método agrega un punto a la ruta actual mediante el uso de los puntos de control especificados que representan la curva paramétrica cuadrática.
Sintaxis:
context.quadraticCurveTo( cx, cy, x, y );
Parámetros:
- cx: este parámetro contiene la coordenada x del punto de control cuadrático.
- cy: este parámetro contiene la coordenada y del punto de control cuadrático.
- x: este parámetro especifica la coordenada x del punto final.
- y: este parámetro especifica la coordenada y del punto final.
Ejemplo 1:
<!DOCTYPE HTML>
<html>
<head>
<title>
HTML canvas quadraticCurveTo() Method
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>HTML canvas quadraticCurveTo() Method</h2>
<canvas id="GFG" width="500" height="300"></canvas>
<script>
var geeks = document.getElementById('GFG');
var context = geeks.getContext('2d');
context.beginPath();
context.moveTo(88, 120);
context.quadraticCurveTo(288, 0, 388, 150);
context.strokeStyle = 'green';
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 2 :
<!DOCTYPE HTML>
<html>
<head>
<title>
HTML canvas quadraticCurveTo() Method
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>HTML canvas quadraticCurveTo() Method</h2>
<canvas id="GFG" width="500" height="300"></canvas>
<script>
var geeks = document.getElementById('GFG');
var context = geeks.getContext('2d');
context.beginPath();
context.moveTo(50, 50);
context.quadraticCurveTo(50, 180, 340, 50);
context.strokeStyle = 'green';
context.lineWidth = 5;
context.stroke();
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con HTML canvas quadraticCurveTo() Method se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA