JavaScript Canvas

Har du noen gang brukt en Windows Paint -applikasjon? La oss bare si at du gjorde det, men hva hvis du vil tegne former, linjer, tekster og 2D- eller 3D -grafikk online på en nettleser, hva gjør du? Her kommer HTML 5 lerret som lar oss tegne 2D- eller 3D -grafikk i en nettleser.

Denne oppskrivningen vil erkjenne deg om

• Hva er et lerret
• Hvordan aktivere et lerret ved hjelp av JavaScript
• Hvordan endre størrelse på et lerret ved hjelp av JavaScript
• Hvordan lage former på et lerret ved hjelp av JavaScript

Hva er et lerret

Canvas er en beholder, som lar oss tegne forskjellige former, linjer og tekster i en nettleser. Som standard er lerretsbeholderen usynlig og har ingen grense. Så for å gjøre det synlig bruker vi HTML 5 lerrets tag og CSS -grenseeiendommen.

Syntaks:

Ovennevnte syntaks viser bare en enkel beholder med en grense.

Hvordan aktivere et lerret ved hjelp av JavaScript

I utgangspunktet er Canvas en HTML 5 -tag, men det er bare i drift ved hjelp av et JavaScript. Følgende kode er obligatorisk for å få tilgang til og aktivere et lerret.

Kode:

const lerret = dokument.QuerySelector ("#lerret");
const contxt = lerret.getContext ("2d");

I denne koden bruker vi QuerySelector () -metoden for å få lerret -ID som vil koble vår JavaScript -kode med lerretet. Deretter bruker vi getContext () -metoden for å spesifisere miljøet til et lerret (2D eller 3D).

Hvordan endre størrelse på et lerret ved hjelp av JavaScript

Vi bruker JavaScript -kode for å gi høyde- og breddeegenskaper til lerretobjekter. Hvis vi bruker CSS for å gi høyde og bredde til lerretsbeholderen, vil den pixelatere beholderen i stedet for å endre størrelse på den. Så bruk følgende JavaScript -kode for å endre størrelse på lerretsbeholderen.

Syntaks:

lerret.høyde = 200;
lerret.bredde = 400;

Hvordan lage former på lerret ved hjelp av JavaScript

Nå skal vi se hvordan vi kan lage forskjellige former på lerret ved hjelp av JavaScript.

Rektangel

Følgende JavaScript -kode brukes til å lage et rektangel på lerretet.

Syntaks:

variabel_navn.Strokerect (verdi_x, verdi_y, bredde, høyde)

Her representerer variabelnavn variabelen vi har laget for getContext () -metoden. Mens StrockRect () -metoden tar fire parametere der verdien x og verdien y representerer posisjonen på lerretet der du vil tegne formen (rektangel). Mens bredde og høyde brukes til å nevne størrelsen på rektangelet.

Kode:

Contxt.Strokerect (50,50,250,100)

I denne koden opprettes et rektangel med 250px bredde og 100px høyde.

Produksjon:

I tilfelle vil du endre fargen på rektangelet, bare legg til følgende kode før rectangle -opprettingskoden:

Kode:

Contxt.Strokestyle = ”Blue”;

Produksjon:

Fylt rektangel

Følgende JavaScript -kode brukes til å lage et fylt rektangel på lerretet.

Syntaks:

variabel_navn.fillRect (verdi_x, verdi_y, bredde, høyde)

FillRect () -metoden tar også de fire parametrene og brukes til å lage et fylt rektangel.

Kode:

Contxt.FillRect (50,50,250,100)

Produksjon:

For å endre fargen på rektangelet, bruk bare FillStyle -egenskapen før rectangle -opprettingskoden:

Kode:

Contxt.FillStyle = ”Aqua”;

Produksjon:

Sirkel

Følgende JavaScript -kode brukes til å lage en sirkel på lerretet.

Syntaks:

variabel_navn.ARC (Value-X, Value-Y, Circle-Radius, Start-vinkel, End-vinkel);
variabel_navn.hjerneslag ();

Her tar bue () -metoden fem parametere inkludert verdien x og verdi y som representerer sirkelen til sirkelen, sirkelradius, startvinkel og sluttvinkelverdi. Stroke () -metode brukes Tegn en bane for sirkelen som til slutt viser en sirkel.

Kode:

Contxt.Arc (180, 100, 80, 0, 2 * Matematikk.Pi);
Contxt.hjerneslag ();

Produksjon:

Linje

Følgende JavaScript -kode brukes til å lage en linje på lerretet.

Syntaks:

variabel_navn.startPath ();
variabel_navn.Moveto (Value-X, Value-Y);
variabel_navn.Lineto (startpunkt, sluttpunkt);
variabel_navn.hjerneslag ();

I denne syntaksen,

BeginPath () -metoden starter en sti,

Moveto () -metoden tar to verdier X og Y som flytter markøren til det spesifikke punktet.

Lineto () -metoden tar også to verdier, utgangspunktet der linjen starter og sluttpunktet der linjen slutter.

Stroke () -metode brukes til å tegne en bane på linjen som til slutt vil vise en linje.

Kode:

Contxt.startPath ();
Contxt.Moveto (50,50);
Contxt.Lineto (300.150);
Contxt.hjerneslag ();

Produksjon:

Tekst

Følgende JavaScript -kode brukes til å skrive en tekst på lerretet.

Syntaks:

variabel_navn.font = "Font-size font-family";
Variable-navn.FillStyle = "Color";
Variable-navn.FillText ("visning av tekst", verdi-x, verdi-y);

Først må du nevne skriftstørrelsen og fontfamilien ved hjelp av fontegenskapen. For det andre, gi fargen hvis du vil bruke FillStyle -egenskapen. Til slutt tar FillText () -metoden tre verdier, tekst, verdi x og verdi y.

Kode:

Contxt.font = "50px arial";
Contxt.FillStyle = "Lightgreen";
Contxt.FillText ("Canvas", 110, 120)

Produksjon:

Hul tekst

Følgende JavaScript -kode brukes til å skrive en hul tekst på lerretet.

Syntaks:

variabel_navn.font = "Font-size font-family";
Variable-navn.Strokestyle = "Color";
Variable-navn.StroKetext ("visning av tekst", verdi-x, verdi-y);

Her brukes StroKetext () -metoden til å skrive teksten i hul stil ..

Kode:

Contxt.font = "50px arial";
Contxt.Strokestyle = "Orange";
Contxt.StroKetext ("Canvas", 110, 120)

Produksjon:

Konklusjon

Canvas er en artboard for å tegne 2D- eller 3D -grafikk i en nettleser. I denne artikkelen har vi lært hvordan vi kan tegne en sirkel, rektangel, linje og tekst på et lerret gjennom JavaScript. Selv om lerret er en HTML5 -tag, men operasjonene på lerret kan bare utføres ved hjelp av en JavaScript -kode.