Hvordan bruke HTML5 og Javascript for å lerret på websiden

HTML5 omfatter begrepet et lerret. Som med kunstnerens versjon av den fysiske lerret, bruker du HTML5 lerret å tegne bilder på skjermen. Bruke lerretet gjør det lettere å håndtere ulike typer tegninger som du trenger for å formidle informasjon til brukeren.

Hva HTML5 lerret gjør

Et lerret er rett og slett en tegning område på skjermen. Å skape et lerret, må nettleseren du samhandler med støtte HTML5. Dette betyr at du må bruke nyere nettleserversjoner, for eksempel Internet Explorer 9.

Du må også ha en forståelse av kilden til lerretet og hvordan lerretet fungerer med klientens nettleser. Lerretet er avhengig av en faktisk <canvas> -taggen. Å tegne noe på skjermen, gi deg en id, en høyde, og en bredde eiendom for <canvas> -taggen som dette:

<lerret id = "MyCanvas"
height = 500
width = 600 />

Størrelsen av lerretet er alltid i piksler. Når du har et lerret å bruke, kan du skape en sammenheng til det ved å skaffe seg en referanse til lerretet element og ringer getContext () med den type sammenheng du ønsker, for eksempel 2D. Konteksten lar deg bruke ulike tegnekommandoer for å lage grafikk på skjermen.

De fleste tutorials anta at klienten er avhengig av lokal Javascript-funksjonalitet for å utføre oppgaven. Et enkelt program kan bruke denne tilnærmingen, men de fleste programmene du oppretter vil stole på serverbaserte lerreter. I dette tilfellet, gi deg en <div> som en beholder for å holde <canvas> at serveren sender til klienten.

Fordelen med denne tilnærmingen er at serveren kan skape et vell av grafikk for klienten og sende de bufrede <canvas> koder til hver klient som trenger dem - å skape en effektiv metode for deling grafikk. Mange utviklere finner denne tilnærmingen forvirrende.

Hvordan å lage en enkel Google API-applikasjon

Mange organisasjoner bruker kart for alle slags interessante formål. Denne artikkelen gir noen flere ideer om hvordan du kan bruke Google Maps API med nettleserbasert din søknad.

Skaff en utviklernøkkel

For å bruke dette eksemplet, må du skaffe et utviklernøkkel. Google tilbyr to typer nøkler: betalt og gratis. Du trenger bare den frie nøkkelen for dette eksemplet. De betalte nøkkelen yter betydelig mer fleksibilitet, og du vil sannsynligvis trenger det for noen fullverdig program du oppretter.

Men for eksperimentering formål, den frie nøkkelen fungerer helt fint. Pass på at du forstår vilkårene for tjenesten fullt ut før du begynner å arbeide med Google Maps API. Du kan også finne noen ekstra hjelp i å bruke Google Maps API med Javascript.

Lag programmet

Det er best å lage koden for dette eksempelet i flere trinn. Den første er å legge de vanlige jQuery referanser. I tillegg må du også legge til en referanse til Google Maps API, som vist her.

<Script type = "text / javascript"
src = "https://maps.googleapis.com/maps/api/js?key= din nøkkel her og sensor = false">
</ Script>

Dette eksempelet vil ikke fungere i det hele tatt med mindre du erstatte ord, din nøkkel her, med nøkkelen som du mottar fra Google. Følgelig er dette bestemt trinn viktig fordi det er den ett skritt du må utføre.

Nå som du har alle de nødvendige referanser på plass, er det på tide å lage et lerret å tegne kartet. Lerretet er rett og slett en <div> med en id: <div id = "MapCanvas"> </ div>. Du må gi stil informasjon som gir den <div> størrelse eller annet Kartet vil ikke vises på skjermen, selv når Google sender det til deg. Eksemplet bruker følgende informasjon stil:

#MapCanvas
{
høyde: 90%;
width: 100%;
}

I tillegg til lerretet, gir eksempel to tekstbokser for innspill og en knapp som du kan bruke til å be om et nytt kart. Det er ikke noe for komplisert om grensesnittet, men det får jobben gjort. Koden for dette eksemplet bruker mange av jQuery og jQuery UI triks:

$ (Function ()
{
// Spor gjeldende breddegrad ved hjelp av en
// Spinner kontroll.
Var Latitude = $ ("# breddegrad"). spinner (
{
min: -90,
max: 90,
trinn: 0,1,

endring: funksjon (hendelse, ui)
{
if (Latitude.spinner ("verdi") <-90)
Latitude.spinner ("verdi", -90);
if (Latitude.spinner ("verdi")> 90)
Latitude.spinner ("verdi", 90);
}
});

// Spor gjeldende lengdegrad ved hjelp av en
// Spinner kontroll.
Var Lengde = $ ("# lengdegrad"). spinner (
{
min: -180,
max: 180,
trinn: 0,1,

endring: funksjon (hendelse, ui)
{
if (Longitude.spinner ("verdi") <-180)
Longitude.spinner ("verdi", -180);
if (Longitude.spinner ("verdi")> 180)
Longitude.spinner ("verdi", 180);
}
});

// Denne funksjonen faktisk viser kartet på
// Skjermen.
funksjon GetMap ()
{
// Lag en liste med argumenter for å sende til Google.
Var MapOptions =
{
senter: ny google.maps.LatLng (
Latitude.spinner ("verdi"),
Longitude.spinner ("value")),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

// Gi sted å plassere kartet og
// Kart alternativer til Google.
Var kart = ny google.maps.Map (
document.getElementById ("MapCanvas"),
MapOptions);
};

// Eksempelet gir to metoder for å få en
// Kartet: under lasting eller ved å klikke Få kart.
$ (Vindu) .load (
funksjon ()
{
GetMap ();
});

$ ("# Submit"). Klikk (
funksjon ()
{
GetMap ();
});
})

For å gjøre det enklere å bla gjennom et område, gir eksempel spinner kontroller for bredde- og lengde innganger. Flytting av en hel grad om gangen ville ikke gjøre anvendelsen meget nyttig, slik at de to spinnere endre inngangene med en tidel av en grad på en gang. (Selv denne innstillingen kan være for stor, så kan det være lurt å endre det.)

Legg merke til at bruk av trinnet mulighet for å utføre denne oppgaven. Breddegrader varierer fra 90 grader nord til -90 grader sør, så eksempelet gjenspeiler dette kravet. Likeledes lengdene varierer fra 180 grader vest til -180 grader øst for Greenwich, England.

Den GetMap () funksjonen utfører selve oppgaven med å skaffe kartet. For å gjøre dette, må søknaden opprette en liste over kart alternativer. Eksemplet viser en enkel, men typisk, listen. Den viktigste av disse alternativene er der for å sentrere kartet.

I dette tilfellet, sentre kartet automatisk selv på Milwaukee, Wisconsin, men du kan endre innstillingene til det stedet du ønsker. Eksempelet bruker en zoomfaktor på 8, og du vil se et veikart. Google Maps API gir faktisk en rekke kart typer som du kan prøve.

Det er to ganger når GetMap () kalles. Når programmet laster, du ser Milwaukee, Wisconsin (med mindre du endrer standardinnstillingene). Når du har endret inngangene, kan du også klikke Få Kart for å vise en ny plassering.