Método closePath
El método closePath cierra automáticamente
una figura dibujada con el método lineTo,
trazando una línea recta desde el punto final
hasta el punto inicial. Si la figura ya estaba cerrada
o es simplemente un punto, el método no hace
nada.
Sintaxis
contexto.closePath();
Ejemplo
Para empezar, dibujemos dos líneas, sin cerrarlas
mediante closePath:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Ejemplo
Y ahora cerremos estas dos líneas en una figura mediante
closePath, obteniendo así un triángulo:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // cerramos las líneas en una figura
ctx.stroke();
:
Ejemplo
Dibujemos un cuadradito, en lugar de la última
línea cerrando la figura mediante closePath:
<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // cerramos las líneas en una figura
ctx.stroke();
:
Véase también
-
método
fill,
que rellena la figura con un color determinado
