Introduksjon til HTML-lerret
I denne artikkelen vil vi se en disposisjon på HTML Canvas. Som du allerede vet, er HTML et markeringsspråk. For å presentere informasjon for den besøkende, kan du skrive HTML med hvilken tekst som skal vises på skjermen og hvordan den vises, dvs. skriftstørrelse, farge, retning osv. Når det gjelder å legge til bilder på en side, må du koble til og legge inn bilder på siden, som er lagret separat fra HTML-filen på verten.
Men hva hvis du trenger å tegne noe på siden?
Hva er HTML-lerret?
HTML-lerret (brukt via tag) er et HTML-element som brukes til å tegne grafikk (linjer, søyler, grafer, etc.) på brukerens dataskjerm når du er på farten. Lerretselementet er bare en beholder for informasjonen. Tegningen er gjort via JavaScript. Den støttes av alle moderne nettlesere som støtter HTML5 og kan gjengi JavaScript. Å lage et HTML-lerret er veldig enkelt, og du kan legge det til på hvilken som helst HTML-side via følgende.
syntaks:
Content here
Du kan definere lerretstørrelse via bredde- og høydeattributtet, en element-ID kan også defineres i taggen som gjør det mulig å bruke CSS Styles på lerretselementet. Følgende er et eksempel på hvordan du kan tegne et rektangel ved hjelp av Canvas-elementet:
Kode:
#examplecanvas(border:2px solid green;)
Produksjon:
Eksempler på HTML lerret tegning
Nå som du har sett hvordan du kan tegne et rektangel ved hjelp av lerretselementet, la oss ta en titt på noen andre objekter som kan tegnes ved hjelp av elementet på en nettleserutgangsskjerm.
1. Tegn en linje på en side
moveTo (), stroke () og lineTo () er metoder som kan brukes til å tegne rette linjer på en webside. Som du kan gjette, forteller moveTo () markørenes plassering i elementrommet og lineTo () er metoden som forteller linjens sluttpunkt. Streket () gjør linjen synlig. Her er koden du refererer til:
Kode:
Canvas Line Example
canvas (
border: 2px solid black;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
);
Produksjon:
2. Å tegne en sirkel på HTML-lerret
I motsetning til rektangler, er det ingen spesiell metode i JavaScript for å tegne en sirkel. I stedet kan vi bruke arc () -metoden, som brukes til å tegne buer for å tegne en sirkel i lerretet. For å få et lerret med en sirkel på det, kan du bruke følgende:
Syntaks:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Her er et eksempel på en side med en sirkel:
Kode:
Canvas with a circle
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
);
Produksjon:
3. Tegne en tekst i HTML-lerret
Tekst kan også tegnes i et HTML-lerret. For å få tekst på lerretet ditt, kan du saksøke metoden filltext (). Følgende er et eksempel på en HTML-side som inneholder tekst inne i et lerretselement:
Kode:
canvas with text inside the element
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
);
Produksjon:
4. Tegne en lysbue inne i et HTML-lerret
Som vi diskuterte med en sirkel, er det en metode som heter arc () som brukes til å tegne buer inne i HTML Canvas. Her er syntaks for metoden der alt du trenger å gjøre er å legge til variabelen din:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Følgende er en HTML-side som har en bue inne i et lerretselement:
Kode:
Arc inside an HTML Canvas
canvas (
border: 3px solid red;
)
window.onload = function() (
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
);
Produksjon:
5. Tegne lineær eller sirkulær fargeforløp
Du kan bruke denne metoden til å oppretteLienearGradient () for å tegne graderinger du ønsker inne i lerretselementet. Med denne metoden må du bruke addColorStop () for å betegne gradientfarger.
syntaks:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Her er en side som har en lineær gradient:
Kode:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "green");
gradient.addColorStop(1, "red");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 300, 150);
Produksjon:
På samme måte er metoden for å tegne sirkulære gradienter createRadialGradient ().
syntaks:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Kode:
If you are seeing this. the browser does not support the HTML5 canvas.
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80, 50, 10, 100, 50, 90);
gradient.addColorStop(0, "blue");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 150, 80);
Produksjon:
Konklusjon
Nå som du er kjent med hva HTML-lerret er og hvordan det kan brukes på websider, bør du føle deg mer trygg på dine nettdesignferdigheter. Mens bilder i noen tilfeller kan brukes, er fordelen med HTML-lerret at den er skalerbar og på en måte lysere med tanke på størrelse og prosessorkraft.
Anbefalt artikkel
Dette er en guide til HTML Canvas. Her diskuterer vi Hva er HTML Canvas og dens eksempler sammen med kodeimplementering og output. Du kan også gå gjennom de foreslåtte artiklene våre for å lære mer -
- Topp 16 HTML-stilattributter
- HTML vs HTML5 | Topp 9 sammenligninger
- WebGL vs Canvas - topp forskjeller
- Topp 40 spørsmål om HTML-intervju
- Angi en bakgrunnsfarge i HTML med eksempel