Las curvas en el lienzo HTML se pueden dibujar usando arcos, pero dibujar un diagrama complejo usando arcos es una tarea bastante tediosa. En las circunstancias dadas, la curva Bezier será muy útil para proporcionar más flexibilidad al dibujar curvas. Las curvas Bezier en el lienzo HTML se dibujan utilizando un punto de inicio, uno o más puntos de control y un punto final. Ejemplo: en el caso de dibujar un paisaje, objetos del mundo real, formas irregulares, etc.
Las curvas Bezier se pueden dibujar de dos maneras:
- Curva de Bézier cuadrática
- Curva Bézier cúbica
Curva Bezier cuadrática: esta curva está controlada por un punto de control.
Sintaxis:
moveTo(start_pnt_X, start_pnt_Y); context.quadraticCurveTo(cntrl_pnt_X, cntrl_pnt_Y, end_pnt_X, end_pnt_y);
Ejemplo: este ejemplo crea una curva utilizando una curva de Bézier cuadrática.
<!DOCTYPE html>
<html>
<head>
<title>
Quadratic Bezier Curve
</title>
</head>
<body>
<h1>Quadratic Bezier Curve</h1>
<canvas id="CanvasOfGeeks" width="400" height="200"
style="border:solid 4px green">
<script>
var c = document.getElementById("CanvasOfGeeks");
var context = c.getContext("2d");
var start_pnt_X = 50;
var start_pnt_Y = 150;
var cntrl_pnt_X = 200;
var cntrl_pnt_Y = 30;
var end_pnt_X = 350;
var end_pnt_Y = 150;
/* Start new path */
context.beginPath();
context.lineWidth=3;
context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y);
/* Starting point of the curve */
context.moveTo(start_pnt_X, start_pnt_Y);
context.quadraticCurveTo(cntrl_pnt_X,
cntrl_pnt_Y, end_pnt_X, end_pnt_Y);
/* drawing line on the canvas */
context.stroke();
</script>
</body>
</html>
Producción:
Explicación:
- Requisito previo: Conceptos básicos de HTML Canvas
- Primera línea: la referencia para el objeto de lienzo se almacena en la variable ‘c’ usando el concepto DOM.
Segunda línea: sin tener un contexto de dibujo del lienzo, no se puede dibujar nada en él.var c = document.getElementById("CanvasOfGeeks"); var context = c.getContext("2d"); - Se puede cambiar el ancho de la línea anulando el valor del atributo «lineWidth» del objeto de contexto.
context.lineWidth=3;
- Para poner un punto sobre la coordenada del punto de control. Puede ver el punto en la figura que se muestra arriba.
context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y);
- Esta función se utiliza para dibujar una curva desde el punto de inicio mencionado en la función.
context.quadraticCurveTo(cntrl_pnt_X, cntrl_pnt_Y, end_pnt_X, end_pnt_Y);
- Esta función se utiliza para mover el contexto.
context.moveTo(start_pnt_X, start_pnt_Y);
Nota: mantenga el punto de control dentro de los límites del lienzo.
Curva Bézier cúbica: esta curva está controlada por dos puntos de control.
Sintaxis:
moveTo(start_pnt_X, start_pnt_Y);
contex.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y, cntrl_pnt_2_X,
cntrl_pnt_2_Y, end_pnt_X, end_pnt_y);
Ejemplo: este ejemplo crea una curva usando una curva bezier cúbica.
<!DOCTYPE html>
<html>
<head>
<title>
Cubic Bezier Curve
</title>
</head>
<body>
<h1>Cubic Bezier Curve</h1>
<canvas id="CanvasOfGeeks" width="400" height="200"
style="border:solid 4px green">
<script>
var c = document.getElementById("CanvasOfGeeks");
var context = c.getContext("2d");
var start_pnt_X = 50;
var start_pnt_Y = 100;
var cntrl_pnt_1_X = 150;
var cntrl_pnt_1_Y = 30;
var cntrl_pnt_2_X = 250;
var cntrl_pnt_2_Y = 170;
var end_pnt_X = 350;
var end_pnt_Y = 150;
/* Start a new Path */
context.beginPath();
context.lineWidth=3;
/* Representing first control point */
context.strokeText( ".", cntrl_pnt_1_X, cntrl_pnt_1_Y);
/* Representing second control point */
context.strokeText( ".", cntrl_pnt_2_X, cntrl_pnt_2_Y);
/* Starting point of the curve */
context.moveTo(start_pnt_X, start_pnt_Y);
context.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y,
cntrl_pnt_2_X, cntrl_pnt_2_Y, end_pnt_X, end_pnt_Y);
/* Drawing line on the canvas */
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo: este ejemplo dibuja un pez usando Bezier Curve.
Aporte:
<!DOCTYPE html>
<html>
<head>
<title>
Drawing a fish using Bezier Curve
</title>
</head>
<body>
<canvas id="CanvasOfGeeks" width="400" height="200"
style="border:solid 4px green">
<script>
var c = document.getElementById("CanvasOfGeeks");
var context = c.getContext("2d");
/* Start a new Path */
context.beginPath();
context.lineWidth=3;
/* Upper curve of the fish, from mouth to tail */
context.moveTo(60, 120);
context.bezierCurveTo(90, 30, 200, 130, 310, 55);
/* Lower curve of the fish, from mouth to tail */
context.moveTo(60, 120);
context.bezierCurveTo(90, 170, 200, 110, 310, 160);
/* Upper half of tail */
context.moveTo(310, 55);
context.quadraticCurveTo(320, 80, 280, 110);
/* lower half of tail */
context.moveTo(310, 160);
context.quadraticCurveTo(320, 120, 280, 110);
/* Eye of the fish */
context.moveTo(100, 100);
context.arc(100, 100, 5, 0, 2*Math.PI);
/* Mouth of the fish */
context.moveTo(60, 120);
context.lineTo(80, 120);
context.stroke();
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhilekhnathdas111 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA