Uvod u HTML Canvas

U ovom ćemo članku vidjeti strukturu na HTML Canvas-u. Kao što već znate, HTML je označni jezik. Da biste posjetitelju predstavili informacije, možete napisati HTML s tekstom koji će se prikazati na zaslonu i kako će se prikazati, tj. Veličinom, bojom, orijentacijom fonta, itd. Kada je riječ o dodavanju vizualnih prikaza na stranicu, obavezni ste povezati i umetnite slike na stranicu, koje su spremljene odvojeno od HTML datoteke na vašem domaćinu.

Ali što ako trebate nešto nacrtati na stranici?

Što je HTML Canvas?

HTML platno (koristi se putem oznake) HTML je element koji se koristi za crtanje grafike (linije, trake, grafikone itd.) Na zaslonu korisničkog računala u pokretu. Element platna je samo spremnik za informacije, a crtanje se vrši putem JavaScript-a. Podržavaju ga svi moderni web preglednici koji podržavaju HTML5 i mogu pružiti JavaScript. Stvaranje HTML platna vrlo je jednostavno i možete ga dodati na bilo koju HTML stranicu putem sljedećeg.

Sintaksa:


Content here

Možete odrediti veličinu platna putem atributa širine i visine, ID elementa može se definirati i u oznaci što omogućuje upotrebu CSS stilova na elementu platna. Slijedi primjer kako crtati pravokutnik pomoću elementa Canvas:

Kodirati:



#examplecanvas(border:2px solid green;)


Izlaz:

Primjeri crtanja HTML platna

Sada kada ste vidjeli kako možete crtati pravokutnik pomoću elementa platna, pogledajmo neke druge predmete koji se mogu nacrtati pomoću elementa na izlaznom zaslonu preglednika.

1. Crtanje crte na stranici

moveTo (), stroke () i lineTo () su metode koje se mogu koristiti za crtanje ravnih linija na web stranici. Kao što možete pretpostaviti, moveTo () govori o položaju cursera u prostoru elemenata, a lineTo () je metoda koja kaže krajnju točku retka. Stroka () čini crtu vidljivom. Ovdje je kôd za vašu referencu:

Kodirati:



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();
);


Izlaz:

2. Crtanje kruga na HTML platnu

Za razliku od pravokutnika, u JavaScript-u ne postoji određena metoda za crtanje kruga. Umjesto toga, možemo koristiti metodu luka (), koja se koristi za crtanje lukova za crtanje kruga na platnu. Da biste dobili platno s krugom na njemu, možete koristiti sljedeće:

Sintaksa:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

Evo primjera stranice s krugom:

Kodirati:



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();
);


Izlaz:

3. Crtanje teksta u HTML platnu

Tekst se također može crtati na HTML platnu. Da biste tekst unijeli na svoje platno, možete tužiti metodu filltext (). Slijedi primjer HTML stranice koja sadrži tekst unutar elementa platna:

Kodirati:



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);
);


Izlaz:

4. Crtanje luka unutar HTML platna

Kao što smo razgovarali s krugom, postoji metoda koja se naziva luk () koji se koristi za crtanje lukova unutar HTML Canvas-a. Ovdje je sintaksa metode u koju sve što morate učiniti je dodati svoju varijablu:

context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);

Slijedi HTML stranica s lukom u elementu platna:

Kodirati:



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();
);


Izlaz:

5. Crtanje linearnog ili kružnog gradijenta u boji

Ovom metodom možete kreiratiLienearGradient () za crtanje gradijenata po vašem izboru unutar elementa platna. Ovom metodom morat ćete koristiti addColorStop () za označavanje boja gradijenta.

Sintaksa:

var gradient = context.createLinearGradient(startX, startY, endX, endY);

Evo stranice s linearnim gradijentom:

Kodirati:



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);

Izlaz:

Slično tome, metoda crtanja kružnih gradijenata je createRadialGradient ().

Sintaksa:

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

Kodirati:



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);

Izlaz:

Zaključak

Sada kada ste upoznati sa HTML što je platno i kako se on može koristiti na web stranicama, trebali biste se osjećati više sigurni u svoje vještine web dizajna. Iako se slike mogu koristiti u nekim slučajevima, prednost HTML platna je u tome što je skalabilan i lakši u pogledu veličine i snage obrade.

Preporučeni članak

Ovo je vodič za HTML Canvas. Ovdje smo razgovarali o tome što je HTML Canvas i njegovi primjeri zajedno s implementacijom i izlazom koda. Možete i proći kroz naše predložene članke da biste saznali više -

  1. 16 najboljih atributa HTML stila
  2. HTML vs HTML5 | Top 9 usporedba
  3. WebGL vs Canvas - glavne razlike
  4. Top 40 pitanja o HTML intervjuu
  5. Postavite boju pozadine u HTML-u s primjerom

Kategorija: