Hvordan Tegn på din webside med HTML5 Tag

May 27  by Eliza

Den <canvas> -taggen setter opp en del av skjermen som skal brukes som et lerret for program-kontrollerte grafikk. Javakode utfører all tegningen og manipulering av bildet. Følgende kode setter opp et lerret element og gir en knapp.

<lerret id = "myCanvas"
width = "300"
height = "200">
Dette eksempelet krever HTML5 lerret støtte
</ Lerret>

<-knappen Type = "button"
onclick = "tegne ()">
Klikk på meg for å se en tegning
</ Knapp>

Lerretet element gjør lite på egen hånd, må du bruke Javascript for å trekke ut en tegning kontekst (en spesiell element som kan trekkes på) og bruke metoder for den sammenheng objekt for å lage dynamiske grafikk. For eksempel, for å gjøre det mulig for uavgjort () -funksjonen når brukeren klikker på knappen, kan du bruke denne koden:

funksjon draw () {
Var myCanvas = document.getElementById ("myCanvas");
Var context = myCanvas.getContext ("2d");
context.fillStyle = "blue";
context.strokeStyle = "red";
sirkel (kontekst, 1, 1, 1);

for (i = 1; i <= 200; i + = 2) {
sirkel (kontekst, i, i, i, "blå");
sirkel (kontekst, 300-i, 200-i, i, "rød");
sirkel (kontekst, 300-i, i, i, "blå");
sirkel (kontekst, i, 200-i, i, "rød");
} // Slutt for

} // End uavgjort

Funksjonen sirkel (kontekst, x, y, radius, farge) {
context.strokeStyle = farge;
context.beginPath ();
context.arc (x, y, radius, 0, Math.PI * 2, true);
context.stroke ();
} // End sirkel

Utgangen av dette lerretet uavgjort koden ser slik ut:

Hvordan Tegn på din webside med HTML5   Tag


De fleste moderne nettlesere støtter noen form for lerretet tag direkte. I øyeblikket, bare en 2D tegning sammenheng er tilgjengelig, men til slutt vil du være i stand til å lage 3D-grafikk direkte i nettleseren.

Konteksten objekt kontrollerer all selve tegningen funksjonalitet. Noen av de viktigste metodene for kontekstobjektet inkluderer:

  • arc (): Tegner en bue (del av en sirkel) som en del av en bane. Lysbuen er definert som en sirkel, med et sentrum og radius, men også med begynnelse og slutt vinkler. Hvis vinklene beskrive en full sirkel (0 til 2 ganger pi radianer), vil buen kommandoen tegner en full sirkel.
  • beginPath (): Begynner definisjonen av en bane. Normalt en bane defineres av en enkelt moveTo kommando, etterfulgt av en serie av kommandoer lineto, og avsluttet med et strøk, closePath eller fyll.
  • closePath (): Kobles det siste punktet på en bane (tegnet med moveTo og lineTo kommandoer) til den første, og skaper en lukket form som kan fylles.
  • drawImage (): Lar deg tegne et bilde (fra en ekstern bildefil) på lerretet. Mange implementasjoner tillater pixel-nivå manipulasjon, slik at du kan bruke egendefinerte filtre og transformasjoner til bildene dine, som gjør langt mer kontroll enn den typiske <img> -taggen.
  • fylle (): Denne kommandoen (og dens varianter, for eksempel fillRect) lar deg bruke den gjeldende fyll stil til elementer trukket på skjermen.
  • fillRect (): Bygger et rektangel av en bestemt størrelse og posisjon, fylt på med den gjeldende fyll stil.
  • fillStyle (): Lar deg angi fyll stil. Dette kan være en standard fargeverdi eller en forhåndsdefinert gradient.
  • lineTo (): Sammen med moveTo kommando, gjør dette deg til å bygge en bane på skjermen. Den lineTo kommandoen tar et punkt som input og trekker fra en tidligere definert punkt til det aktuelle punktet. Legg merke til at banen ikke vises til søknad av hjerneslag funksjon.
  • linjebredde (): Dette definerer bredden på linje blir trukket av en slag kommando.
  • moveTo: Brukes i bane definisjon for å angi startpunktet for en bane.
  • hjerneslag (): Tegner tiden definert bane. Merk at banene ikke er umiddelbart trukket; hjerneslag kommandoen faktisk trekker banen på skjermen.
  • strokeRect (): Tegner en ubesatt rektangel.
  • strokeStyle (): Bestemmer stilen på neste slag skal trekkes. De fleste tegne sammenhenger støtter prikkete og stiplete strekstiler, men flere er ventet.
  • tekst: Enkelte implementeringer av lerretet tag tillate tekst manipulasjon. Denne støtten er ujevn, men det er sannsynlig å bli vanlig i fremtiden implementeringer.

Lerretet tag er en av de viktigste nye funksjonene i HTML5, som gjør det mulig nesten ubegrenset kontroll over det visuelle grensesnittet. Spillutviklere har begynt å lage online spill ved hjelp av lerretet, og det har allerede blitt grunnlaget for flere innovative eksperimenter (spesielt Google Maps) brukergrensesnitt.