Introducere în HTML Canvas
În acest articol vom vedea o prezentare pe HTML Canvas, după cum știți deja, HTML este un limbaj de marcare. Pentru a prezenta informații vizitatorului, puteți scrie HTML cu ce text trebuie afișat pe afișaj și cum va fi afișat, adică dimensiunea fontului, culoarea, orientarea, etc. Când vine vorba de adăugarea de imagini pe o pagină, trebuie să faceți legătura și încorporați imagini în pagină, care sunt stocate separat de fișierul HTML din gazda dvs.
Dar dacă ar trebui să desenați ceva pe pagină?
Ce este HTML Canvas?
Pânza HTML (folosită prin etichetă) este un element HTML care este folosit pentru a desena grafică (linii, bare, grafice etc.) pe ecranul computerului utilizator din zbor. Elementul pânză este doar un container pentru informații, însă desenul se face prin JavaScript. Este susținut de toate browserele web moderne care acceptă HTML5 și poate face redarea JavaScript. Crearea unui panou HTML este foarte simplă și îl puteți adăuga la oricare pagină HTML prin următoarele.
Sintaxă:
Content here
Puteți defini dimensiunea pânzei prin atributul lățime și înălțime, un cod de element poate fi, de asemenea, definit în etichetă care face posibilă utilizarea CSS Stiluri pe elementul pânză. Urmează un exemplu despre cum poți desena un dreptunghi folosind elementul Canvas:
Cod:
#examplecanvas(border:2px solid green;)
ieşire:
Exemple de desen pe pânză HTML
Acum că ați văzut cum puteți desena un dreptunghi folosind elementul pânză, să aruncăm o privire la alte obiecte care pot fi desenate folosind elementul de pe ecranul de ieșire al browserului.
1. Desenarea unei linii pe o pagină
moveTo (), stroke () și lineTo () sunt metode care pot fi utilizate pentru a trasa linii drepte pe o pagină web. După cum puteți ghici, moveTo () spune poziția cursorului în spațiul elementului și lineTo () este metoda care indică punctul final al liniei. Accidentul () face vizibilă linia. Iată codul pentru referința dvs.:
Cod:
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();
);
ieşire:
2. Desenarea unui cerc pe HTML Canvas
Spre deosebire de dreptunghiuri, nu există nicio metodă specifică în JavaScript pentru a desena un cerc. În schimb, putem folosi metoda arc (), care este folosită pentru a desena arcuri pentru a desena un cerc în pânză. Pentru a obține o pânză cu un cerc pe ea, puteți utiliza următoarele:
Sintaxa:
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
Iată un exemplu de pagină cu un cerc:
Cod:
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();
);
ieşire:
3. Desenarea unui text în HTML Canvas
Textul poate fi desenat și într-un Canvas HTML. Pentru a introduce text pe pânza dvs., puteți trimite în judecată metoda filltext (). Urmează un exemplu de pagină HTML care conține text în interiorul unui element pânză:
Cod:
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);
);
ieşire:
4. Desenarea unui arc în interiorul unei pânze HTML
Așa cum am discutat cu un cerc, există o metodă numită arc () care este utilizată pentru a desena arcuri în HTML Canvas. Iată sintaxa metodei în care nu trebuie decât să adăugați variabila:
context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);
Urmează o pagină HTML care are un arc în interiorul unui element de pânză:
Cod:
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();
);
ieşire:
5. Desenarea gradientului de culoare liniară sau circulară
Puteți utiliza această metodă pentru a creaLienearGradient () pentru a atrage gradienții la alegere în interiorul elementului pânză. Cu această metodă, va trebui să utilizați addColorStop () pentru a indica culori de gradient.
Sintaxă:
var gradient = context.createLinearGradient(startX, startY, endX, endY);
Iată o pagină care are un gradient liniar:
Cod:
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);
ieşire:
În mod similar, metoda de trasare a gradienților circulari este createRadialGradient ().
Sintaxă:
var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);
Cod:
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);
ieşire:
Concluzie
Acum, când sunteți familiarizați cu ce este pânza HTML și cum poate fi folosit în paginile web, ar trebui să vă simțiți mai încrezători în abilitățile dvs. de design web. În timp ce imaginile pot fi utilizate în unele cazuri, avantajul pânzei HTML este că este scalabil și mult mai ușor în ceea ce privește dimensiunea și puterea de procesare.
Articol recomandat
Acesta este un ghid pentru HTML Canvas. Aici vom discuta Ce este HTML Canvas și exemplele sale împreună cu implementarea și ieșirea Codului. De asemenea, puteți parcurge articolele noastre sugerate pentru a afla mai multe -
- Top 16 atribute în stil HTML
- HTML vs HTML5 | Top 9 comparații
- WebGL vs Canvas - diferențe de top
- Top 40 de întrebări de interviu HTML
- Setați o culoare de fundal în HTML cu Exemplu