Introduktion till HTML Canvas
I den här artikeln kommer vi att se en översikt på HTML Canvas. Som du redan vet är HTML ett markeringsspråk. För att presentera information för besökaren kan du skriva HTML med vilken text som ska visas på displayen och hur den kommer att visas, dvs teckenstorlek, färg, orientering etc. När det gäller att lägga till bilder på en sida måste du länka och bädda in bilder på sidan, som lagras separat från HTML-filen på din värd.
Men vad händer om du behöver rita något på sidan?
Vad är HTML Canvas?
HTML-duk (används via tagg) är ett HTML-element som används för att rita grafik (linjer, staplar, grafer, etc.) på användardatorens skärm i farten. Kanfaselementet är dock bara en behållare för informationen, ritningen görs via JavaScript. Det stöds av alla moderna webbläsare som stöder HTML5 och kan återge JavaScript. Att skapa en HTML-duk är väldigt enkelt och du kan lägga till den på varje HTML-sida via följande.
Syntax:
Content here
Du kan definiera dukstorlek via bredd- och höjdattributet, ett element-ID kan också definieras i taggen som gör det möjligt att använda CSS-stilar på dukelementet. Följande är ett exempel på hur du kan rita en rektangel med Canvas-elementet:
Koda:
#examplecanvas(border:2px solid green;)
Produktion:
Exempel på HTML Canvas Ritning
Nu när du har sett hur du kan rita en rektangel med dukelementet, låt oss ta en titt på några andra objekt som kan ritas med elementet på en webbläsares utgångsskärm.
1. Rita en linje på en sida
moveTo (), stroke () och lineTo () är metoder som kan användas för att rita raka linjer på en webbsida. Som du kan gissa, säger moveTo () markörens position i elementutrymmet och lineTo () är metoden som berättar linjens slutpunkt. Slaget () gör linjen synlig. Här är koden för din referens:
Koda:
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. Rita en cirkel på HTML Canvas
Till skillnad från rektanglar finns det ingen speciell metod i JavaScript för att rita en cirkel. Istället kan vi använda arc () -metoden, som används för att rita bågar för att rita en cirkel i duken. För att få en duk med en cirkel på kan du använda följande:
Syntax:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Här är ett exempel på en sida med en cirkel:
Koda:
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. Rita en text i HTML Canvas
Text kan också ritas i en HTML-kanfas. För att få text på din duk kan du stämma metoden filltext (). Följande är ett exempel på en HTML-sida som innehåller text i ett dukelement:
Koda:
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. Rita en båge inuti en HTML-duk
Som vi diskuterade med en cirkel finns det en metod som kallas båge () som används för att rita bågar inuti HTML Canvas. Här är syntaxen för metoden där allt du behöver göra är att lägga till din variabel:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Följande är en HTML-sida som har en båge inuti ett dukelement:
Koda:
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. Rita linjär eller cirkulär färggradient
Du kan använda den här metoden för att skapaLienearGradient () för att rita graderingar du väljer i dukelementet. Med den här metoden måste du använda addColorStop () för att beteckna gradientfärger.
Syntax:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Här är en sida som har en linjär lutning:
Koda:
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:
På liknande sätt är metoden för att rita cirkulära lutningar createRadialGradient ().
Syntax:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Koda:
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:
Slutsats
Nu när du är bekant med vad HTML-duk är och hur det kan användas på webbsidor bör du känna dig mer säker på dina webbdesignfärdigheter. Medan bilder i vissa fall kan användas, är fördelen med HTML-duk att den är skalbar och sätt lättare när det gäller storlek och bearbetningskraft.
Rekommenderad artikel
Detta är en guide till HTML Canvas. Här diskuterar vi Vad är HTML Canvas och dess exempel tillsammans med kodimplementering och output. Du kan också gå igenom våra föreslagna artiklar för att lära dig mer -
- Topp 16 HTML-stilattribut
- HTML vs HTML5 | Topp 9 jämförelser
- WebGL vs Canvas - toppskillnader
- Topp 40 frågor om HTML-intervjuer
- Ställ in en bakgrundsfärg i HTML med exempel