Introduktion til HTML lærred
I denne artikel vil vi se en oversigt over HTML Canvas. Som du allerede ved, er HTML et markup-sprog. For at præsentere information for den besøgende kan du skrive HTML med hvilken tekst der skal vises på skærmen og hvordan den vises, dvs. skriftstørrelse, farve, retning osv. Når det gælder tilføjelse af grafik til en side, skal du linke og integrer billeder på siden, der gemmes separat fra HTML-filen på din vært.
Men hvad nu hvis du har brug for at tegne noget på siden?
Hvad er HTML lærred?
HTML-lærred (brugt via tag) er et HTML-element, der bruges til at tegne grafik (linjer, søjler, grafer osv.) På brugerens computerskærm undervejs. Lærredselementet er dog kun en beholder til informationen. Tegningen udføres via JavaScript. Det understøttes af alle moderne webbrowsere, der understøtter HTML5 og kan gengive JavaScript. Oprettelse af et HTML-lærred er meget enkelt, og du kan føje det til på en hvilken som helst HTML-side via følgende.
Syntaks:
Content here
Du kan definere lærredstørrelse via attributtet bredde og højde, et element-ID kan også defineres i tagget, hvilket gør det muligt at bruge CSS Styles på lærredselementet. Følgende er et eksempel på, hvordan du kan tegne et rektangel ved hjælp af lærredselementet:
Kode:
#examplecanvas(border:2px solid green;)
Produktion:
Eksempler på HTML lærredstegning
Nu hvor du har set, hvordan du kan tegne et rektangel ved hjælp af lærredselementet, lad os se på nogle andre objekter, der kan tegnes ved hjælp af elementet på en browserudgangsskærm.
1. Tegning af en linje på en side
moveTo (), stroke () og lineTo () er metoder, der kan bruges til at tegne lige linjer på en webside. Som du kan gætte, fortæller moveTo () positionen af markøren i elementrummet og lineTo () er den metode, der fortæller linjens slutpunkt. Streget () gør linjen synlig. Her er koden til din reference:
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();
);
Produktion:
2. Tegning af en cirkel på HTML lærred
I modsætning til rektangler er der ingen særlig metode i JavaScript til at tegne en cirkel. I stedet kan vi bruge buen () -metoden, som bruges til at tegne buer for at tegne en cirkel i lærredet. For at få et lærred med en cirkel på det, kan du bruge følgende:
Syntaks:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Her er et eksempel på en side med en cirkel:
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();
);
Produktion:
3. Tegning af en tekst i HTML-lærred
Tekst kan også tegnes på et HTML-lærred. For at få tekst på dit lærred kan du sagsøge metoden filltext (). Følgende er et eksempel på en HTML-side, der indeholder tekst inde i et lærredselement:
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);
);
Produktion:
4. Tegning af en bue inde i et HTML-lærred
Som vi diskuterede med en cirkel, er der en metode, der kaldes bue (), der bruges til at tegne buer inde i HTML-lærred. Her er syntaks for metoden, hvor alt hvad du skal gøre er at tilføje din variabel:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Følgende er en HTML-side, der har en bue inde i et lærredselement:
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();
);
Produktion:
5. Tegning af lineær eller cirkulær farvegradient
Du kan bruge denne metode til at opretteLienearGradient () til at tegne gradueringer efter eget valg i lærredselementet. Med denne metode skal du bruge addColorStop () til at betegne gradientfarver.
Syntaks:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Her er en side, der 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);
Produktion:
Tilsvarende er metoden til at tegne cirkulæ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);
Produktion:
Konklusion
Nu, hvor du er bekendt med, hvad HTML-lærred er, og hvordan det kan bruges på websider, skal du føle dig mere sikker på dine web-designfærdigheder. Mens billeder i nogle tilfælde kan bruges, er fordelen ved HTML-lærred, at den er skalerbar og måde lettere med hensyn til størrelse og behandlingsstyrke.
Anbefalet artikel
Dette er en guide til HTML-lærred. Her diskuterer vi Hvad er HTML lærred og dets eksempler sammen med kodeimplementering og output. Du kan også gennemgå vores foreslåede artikler for at lære mere -
- Top 16 HTML-stilattributter
- HTML vs HTML5 | Top 9 sammenligninger
- WebGL vs Canvas - topforskelle
- Top 40 HTML-interviewspørgsmål
- Indstil en baggrundsfarve i HTML med eksempel