Inleiding tot HTML Canvas
In dit artikel zien we een overzicht op HTML Canvas. Zoals u al weet, is HTML een opmaaktaal. Om informatie aan de bezoeker te presenteren, kunt u HTML schrijven met welke tekst op het display moet worden weergegeven en hoe deze wordt weergegeven, bijv. Lettergrootte, kleur, oriëntatie, enz. Als het gaat om het toevoegen van visuals aan een pagina, moet u linken en voeg afbeeldingen in op de pagina, die afzonderlijk van het HTML-bestand op uw host worden opgeslagen.
Maar wat als u iets op de pagina moet tekenen?
Wat is HTML Canvas?
HTML-canvas (gebruikt via tag) is een HTML-element dat wordt gebruikt om afbeeldingen (lijnen, balken, grafieken, enz.) Direct op het computerscherm te tekenen. Het canvas-element is echter slechts een container voor de informatie, de tekening wordt gedaan via JavaScript. Het wordt ondersteund door alle moderne webbrowsers die HTML5 ondersteunen en JavaScript kunnen weergeven. Een HTML-canvas maken is heel eenvoudig en u kunt het via de volgende HTML-pagina toevoegen.
Syntaxis:
Content here
U kunt canvasgrootte definiëren via het attribuut width en height, er kan ook een element-ID worden gedefinieerd in de tag waarmee CSS-stijlen op het canvas-element kunnen worden gebruikt. Hierna volgt een voorbeeld van hoe u een rechthoek kunt tekenen met het Canvas-element:
Code:
#examplecanvas(border:2px solid green;)
Output:
Voorbeelden van HTML-canvastekening
Nu je hebt gezien hoe je een rechthoek kunt tekenen met behulp van het canvas-element, laten we eens kijken naar enkele andere objecten die kunnen worden getekend met het element op een uitvoerscherm van een browser.
1. Een lijn tekenen op een pagina
moveTo (), stroke () en lineTo () zijn methoden die kunnen worden gebruikt om rechte lijnen op een webpagina te tekenen. Zoals je kunt raden, vertelt moveTo () de positie van de cursor in de elementruimte en lineTo () is de methode die het eindpunt van de lijn aangeeft. De streek () maakt de lijn zichtbaar. Hier is de code voor uw referentie:
Code:
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();
);
Output:
2. Een cirkel tekenen op HTML Canvas
In tegenstelling tot rechthoeken is er geen specifieke methode in JavaScript om een cirkel te tekenen. In plaats daarvan kunnen we de methode arc () gebruiken, die wordt gebruikt om bogen te tekenen om een cirkel in het canvas te tekenen. Om een canvas met een cirkel erop te krijgen, kunt u het volgende gebruiken:
Syntaxis:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Hier is een voorbeeld van een pagina met een cirkel:
Code:
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();
);
Output:
3. Een tekst tekenen in HTML Canvas
Tekst kan ook in een HTML-canvas worden getekend. Om tekst op uw canvas te krijgen, kunt u de methode filltext () aanklagen. Hierna volgt een voorbeeld van een HTML-pagina die tekst in een canvas-element bevat:
Code:
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);
);
Output:
4. Een boog tekenen in een HTML-canvas
Zoals we met een cirkel hebben besproken, is er een methode genaamd arc () die wordt gebruikt om bogen in HTML Canvas te tekenen. Hier is de syntaxis van de methode waarbij u alleen uw variabele hoeft toe te voegen:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Hierna volgt een HTML-pagina met een boog in een canvas-element:
Code:
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();
);
Output:
5. Lineair of cirkelvormig kleurverloop tekenen
U kunt deze methode gebruiken omLienearGradient () te maken om de gewenste verlopen in het canvas-element te tekenen. Met deze methode moet u addColorStop () gebruiken om verloopkleuren aan te duiden.
Syntaxis:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Hier is een pagina met een lineair verloop:
Code:
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);
Output:
Op dezelfde manier is de methode om cirkelvormige verlopen te tekenen createRadialGradient ().
Syntaxis:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Code:
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);
Output:
Conclusie
Nu u bekend bent met wat HTML-canvas is en hoe het in webpagina's kan worden gebruikt, zou u meer vertrouwen moeten hebben in uw webontwerpvaardigheden. Hoewel afbeeldingen in sommige gevallen kunnen worden gebruikt, is het voordeel van HTML-canvas dat het schaalbaar is en veel lichter qua grootte en verwerkingskracht.
Aanbevolen artikel
Dit is een handleiding voor HTML Canvas. Hier bespreken we wat HTML Canvas en zijn voorbeelden zijn, samen met de implementatie en uitvoer van code. U kunt ook onze voorgestelde artikelen doornemen voor meer informatie -
- Top 16 HTML-stijlattributen
- HTML versus HTML5 | Top 9 vergelijkingen
- WebGL versus Canvas - topverschillen
- Top 40 HTML-interviewvragen
- Stel een achtergrondkleur in HTML in met Voorbeeld