Tekening van lyne deur canvas op JavaScript
Kom ons begin eenvoudig - met die teken van lyne. Om te verstaan hoe dit gedoen word, stel jou voor dat jy 'n vel papier en 'n potlood het. Jy kan op hierdie vel teken, of jy kan net die potlood na die verlangde punt skuif sonder om te teken.
JavaScript werk ook so: dit het 'n
potlood (of pen vir teken), na die verlangde
plek kan jy dit skuif met behulp van
die metode moveTo, en teken - met behulp van
die metode lineTo.
Albei metodes neem as parameters die punt waarheen
die penpunt geskuif moet word - die eerste parameter
is die koördinaat horisontaal, en die tweede - vertikaal.
Die oorsprong - punt 0,
0 - is die boonste linkerhoek van die element.
Wanneer die pen na 'n verlangde punt beweeg -
skuif die metode moveTo net, terwyl
lineTo tydens die skuif 'n
lyn teken vanaf die huidige posisie van die pen na die punt
waarheen dit sal beweeg.
As jy egter die bogenoemde kode uitvoer
- sal niks gebeur nie: dit is nodig om
nog twee instruksies te skryf: die eerste instruksie beginPath
moet voor die begin van die lyn geteken word,
en die tweede instruksie stroke moet
genoem word na alle kombinasies van moveTo
en lineTo sodat die lyn geteken kan word.
Kom ons skryf dus werkende kode vir die teken van 'n lyn:
Kom ons teken 'n lyn
<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.stroke();
:
Kom ons teken 'n voëltjie
<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();
:
Kom ons teken 'n driehoek
<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.lineTo(50, 50);
ctx.stroke();
:
Kom ons teken 'n vierkantjie
<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();
ctx.stroke();
:
Sluiting van figure
Om 'n geslote figuur te teken, is dit nie nodig nie
om alle lyne te maak nie - die laaste lyn kan
outomaties geteken word en die figuur sluit.
Hiervoor moet voor die metode stroke
die metode closePath genoem word.
Hierdie metode probeer om die figuur te sluit deur 'n reguit lyn te teken vanaf die eindpunt na die beginpunt. As die figuur reeds gesluit is of net 'n punt is, doen die metode niks.
Kom ons teken 'n driehoek deur closePath te gebruik:
<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.lineTo(50, 50); - ons laat hierdie stap uit
ctx.closePath();
ctx.stroke();
:
Inkleuring van figure
In plaas van die metode stroke kan jy die
metode fill gebruik - in hierdie geval hoef die figuur nie noodwendig
heeltemal gesluit te wees nie - dit sal in elk geval ingekleur word:
<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.lineTo(50, 50); - ons laat hierdie stap uit
//ctx.closePath(); - en hierdie een ook
ctx.fill();
:
