Metoda closePath
Metoda closePath închide automat
forma desenată cu metoda lineTo,
trăgând o linie dreaptă din punctul final
în punctul de start. Dacă forma era deja închisă
sau este doar un punct, atunci metoda nu face
nimic.
Sintaxă
context.closePath();
Exemplu
Pentru început, să desenăm două linii, fără a le închide
prin 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();
:
Exemplu
Iar acum să închidem aceste două linii într-o formă prin
closePath, obținând astfel un triunghi:
<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(); // închidem liniile într-o formă
ctx.stroke();
:
Exemplu
Să desenăm un pătrat, în locul ultimei
linii închizând forma prin 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(); // închidem liniile într-o formă
ctx.stroke();
:
Vedeți și
-
metoda
fill,
care umple forma cu o culoare specificată
