Sissejuhatus HTML lõuendisse
Selles artiklis näeme HTML-lõuendi kontuuri. Nagu te juba teate, on HTML märgistuskeel. Külastajale teabe esitamiseks võite kirjutada HTML-i koos selle tekstiga, mida ekraanil kuvatakse, ja kuidas seda kuvatakse, st fondi suurus, värv, suund jne. Kui soovite lehele visuaale lisada, peate linke looma ja manustage lehele pildid, mis salvestatakse teie hostis HTML-failist eraldi.
Aga mis siis, kui peate lehele midagi joonistama?
Mis on HTML lõuend?
HTML-lõuend (kasutatakse sildi kaudu) on HTML-element, mida kasutatakse graafika (jooned, ribad, graafikud jne) joonistamiseks kasutaja arvutiekraanil lennult. Lõuendielement on vaid teabe konteiner, aga joonis tehakse JavaScripti kaudu. Seda toetavad kõik kaasaegsed veebibrauserid, mis toetavad HTML5 ja saavad JavaScripti renderdada. HTML-lõuendi loomine on väga lihtne ja saate selle lisada ükskõik millisele HTML-lehele järgneva kaudu.
Süntaks:
Content here
Lõuendi suuruse saab määratleda atribuudi laius ja kõrgus abil. Sildis saab määratleda ka elemendi ID, mis võimaldab lõuendielemendil kasutada CSS-i stiile. Järgmine on näide sellest, kuidas saate ristküliku joonistada elemendi Lõuend abil:
Kood:
#examplecanvas(border:2px solid green;)
Väljund:
HTML lõuendi joonistamise näited
Nüüd, kui olete näinud, kuidas saab lõuendi elemendi abil ristküliku joonistada, vaatame veel mõnda objekti, mida saab elemendi abil joonistada brauseri väljundkuvale.
1. Joone joonistamine lehele
moveTo (), insult () ja lineTo () on meetodid, mille abil saab veebilehele sirgjooni tõmmata. Nagu võite arvata, annab moveTo () kursori asukoha elemendiruumi ja lineTo () on meetod, mis ütleb rea lõpppunkti. Löök () muudab joone nähtavaks. Siin on teie viite kood:
Kood:
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();
);
Väljund:
2. HTML-lõuendile ringi joonistamine
Erinevalt ristkülikutest pole JavaScriptis ühtegi konkreetset meetodit ringi joonistamiseks. Selle asemel võime kasutada meetodit arc (), mille abil joonistatakse kaared lõuendile ringi joonistamiseks. Rõngaga lõuendi saamiseks võite kasutada järgmist.
Süntaks:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Siin on näide ringiga lehest:
Kood:
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();
);
Väljund:
3. Teksti joonistamine HTML lõuendile
Teksti saab joonistada ka HTML lõuendisse. Teksti lõuendile saamiseks võite kohtusse kaevata filltext () meetodi. Järgmine on näide HTML-leheküljest, mis sisaldab lõuendi elemendis teksti:
Kood:
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);
);
Väljund:
4. Kaare joonistamine HTML lõuendile
Nagu ringiga arutasime, on olemas meetod nimega arc (), mida kasutatakse kaaride joonistamiseks HTML lõuendisse. Siin on meetodi süntaks, kus peate tegema ainult muutuja lisamise:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Järgnev on HTML-leht, mille lõuendielemendil on kaar:
Kood:
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();
);
Väljund:
5. Lineaarse või ümmarguse värvigradiendi joonistamine
Selle meetodi abil saate luuaLienearGradient (), et joonistada lõuendielemendi alla valitud kalded. Selle meetodi puhul peate gradientvärvide tähistamiseks kasutama lisa addololtop ().
Süntaks:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Siin on leht, millel on lineaarne gradient:
Kood:
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);
Väljund:
Samamoodi on ümmarguste gradientide joonistamise meetod createRadialGradient ().
Süntaks:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Kood:
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);
Väljund:
Järeldus
Nüüd, kui olete tutvunud HTML lõuendiga ja kuidas seda saab veebilehtedel kasutada, peaksite end oma veebikujunduse oskuste osas enesekindlamalt tundma. Kuigi pilte saab mõnel juhul kasutada, on HTML-lõuendi eeliseks see, et see on skaleeritav ja suuruselt ning töötlemisvõimsuselt kergem.
Soovitatav artikkel
See on HTML lõuendi juhend. Siin arutame Mis on HTML lõuend ja selle näited koos koodi juurutamise ja väljundiga. Lisateavet leiate ka meie soovitatud artiklitest -
- 16 parimat HTML-i stiili atribuuti
- HTML vs HTML5 | 9 parimat võrdlust
- WebGL vs lõuend - peamised erinevused
- 40 parimat HTML-i intervjuu küsimust
- Seadistage HTML-is taustavärv näitega