Vonalak rajzolása canvas segítségével JavaScriptben
Kezdjük egy egyszerű dologgal - vonalak rajzolásával. Hogy megértsük, hogyan is működik ez, képzeljük el, hogy van egy papírlapunk és egy ceruzánk. Rajzolhatunk a lapon, vagy ceruza leemelésével elmozdulhatunk egy másik pontra.
Ugyanígy működik a JavaScript is: van egy ceruzája (vagy rajztoll),
amelyet a moveTo metódussal mozgatunk egy másik pontba,
és a lineTo metódussal rajzolunk.
Mindkét metódus paraméterként fogadja a pontot, ahova
a ceruza hegyét mozgatni kell - az első paraméter a vízszintes koordináta,
a második pedig a függőleges. A koordinátarendszer origója - a 0,
0 pont - az elem bal felső sarkában található.
Amikor a ceruzát egy másik pontba mozgatjuk -
a moveTo metódus csak mozgat,
a lineTo metódus viszont a mozgatás során vonalat húz
a ceruza jelenlegi helyzetétől az addig a pontig,
ahova épp mozgatjuk.
Azonban, ha a fenti kódot lefuttatjuk
- semmi sem fog történni: még két parancsot kell kiadnunk:
először a beginPath parancsot kell kiadnunk
a vonal rajzolásának megkezdése előtt,
majd a stroke parancsot kell meghívnunk
az összes moveTo és lineTo kombináció után,
hogy a vonal megrajzolódjon.
Nos, írjunk működő kódot egy vonal megrajzolásához:
Rajzoljunk egy vonalat
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
Результат:
Rajzoljunk egy madarat
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet 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();
Результат:
Rajzoljunk egy háromszöget
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
Результат:
Rajzoljunk egy négyzetet
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet 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();
ctx.stroke();
Результат:
Alakzatok lezárása
Egy zárt alakzat megrajzolásához nem feltétlenül kell
mindegyik vonalat meghúzni - az utolsó vonal
automatikusan megrajzolható és lezárhatja az alakzatot.
Ehhez a stroke metódus előtt kell
meghívni a closePath metódust.
Ez a metódus megpróbálja lezárni az alakzatot úgy, hogy egyenes vonalat húz a végpontból a kezdőpontba. Ha az alakzat már zárt volt, vagy csak egy pontból áll, akkor a metódus nem csinál semmit.
Rajzoljunk egy háromszöget a closePath használatával:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ezt a lépést kihagyjuk
ctx.closePath();
ctx.stroke();
Результат:
Alakzatok kitöltése
A stroke metódus helyett használhatjuk
a fill metódust - ekkor az alakzat nem feltétlenül
kell, hogy teljesen zárt legyen - így is kitölti:
html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - ezt a lépést kihagyjuk
//ctx.closePath(); - és ezt is
ctx.fill();
Результат: