JavaScript platno: opis, značajke, primjeri, recenzije

Platno se sastoji od oznake na platnu, ali kada se upućuje na njega, upućuje se na API koji uključuje skup funkcija za crtanje linija, pravokutnika, krugova, lukova, skaliranja i transformacije grafičkih elemenata. U slučaju platna na web-stranici, ovo je pravokutno područje za rastersku sliku u kojoj je svakoj koordinati dodijeljena boja. JavaScript na platnu ne stvara vektorske objekte u stilu drugih okruženja kao što su SVG ili Flash, već samo raster kao sliku. Zapravo, možete učitati sliku na platno i manipulirati je pikselima jedan po jedan. Usluga je nedavno uključena u HTML i ne podržavaju je stari preglednici. Za njih je prikladno da pruže alternativni sadržaj u obliku fiksnog crteža ili objašnjavajućeg teksta.


Canvas vs Flash tehnologija

JavaScript na platnu (canvas) je standardni HTML5 element kojim upravljaju moderni preglednici. Flash je tehnološka tvrtka koja zahtijeva instalaciju dodatka. Danas većina preglednika ima instaliran Flash plugin, kao i prije, postoje oni koji ne podržavaju Canvas. Međutim, dinamika razvoja sugerira da se situacija može promijeniti vrlo brzo, jer nove platforme više ne rade s "Flashom". Međutim, većina grafičkih dizajnera smatra da je rad s Flashom jednostavniji i brži nego s webbedom, budući da ima napredno okruženje grafičkog dizajna (Adobe Flash CS6), a proces izrade Canvas javascript grafike je malo teži. Situacija bi se trebala promijeniti s pojavom okvira u obliku papira.js. Međutim, imajte na umu da je noviUsluga je besplatna i otvorena, tako da ne morate trošiti novac na licencu. Flash je u vlasništvu tvrtke Adobe. To se objašnjava činjenicom da se danas uz pomoć njega i dalje stvaraju složene igre.


Ako želite koristiti grafike u više razlučivosti, vektorska tehnologija "Flash" je učinkovitija od Canvas rastera. Ali za većinu web grafike tkanina se brže opterećuje. Flash zahtijeva više resursa za pokretanje, tako da na mobilnom uređaju JavaScript na platnu ima značajnu prednost. Platno omogućuje stvaranje grafike svih vrsta, od ravne linije do interaktivnih igara, a također vam omogućuje uređivanje slika, promjenu tona i granica.

Atribut atributa

Canvas je HTML element koji vam omogućuje dinamičko stvaranje grafike i skriptiranje animacija. Njegove aplikacije imaju širok raspon primjena: igre, sučelja, uređivači slika, dinamički efekti i 3D aplikacije. Glavne prednosti usluge - ne zahtijeva nikakve dodatne dodatke, samo jedan preglednik koji podržava javascript html5 Canvas: Safari, Chrome, Firefox, Opera i Internet Explorer. Primjerice, za crtanje dva pravokutnika različitih boja koristite nekoliko funkcija javascript API-ja. Prvo, prostor platna na stranici je rezerviran, koristeći HTML oznaku, a zatim nacrtajte oblike. Postavljanje elementa javascript html5 Canvas prikazano je na fotografiji.
Po izboru, drugi, kao što je stil, smješteni su kako bi odredili atribute tablice i odredili njihov izgled. Zatim provjerite kompatibilnost preglednika s Canvasom, prepišite kod.
Uz getElementById () dobivamo element stranice koji jePreneseno kao parametar Canvas. Zatim dobivaju pristup 2D kontekstu platna i izvode onoliko metoda koliko je potrebno u kontekstu za crtanje animacijskih elemenata javascripta na platnu.
Zatim napišite puni kôd izvršenja.

Slika pravokutnika

Za crtanje jednostavnog sivog pravokutnika 450 x 350 piksela koji pokriva cijelo platno, upišite kôd.
Širina i visina podataka određuju veličinu površine. Pozicija koju zauzima ova web stranica određena je mjestom gdje je HTML element napisan. Primjeri javascript platna mogu se postaviti unutar tablice ili unutar plutajućeg spremnika. Ako platforma ne podržava stil, pojavit će se tekst "Vaš preglednik ne podržava Canvas". Zatim stavite oznaku s hvatanjem slike koja stvara platno. Da biste se mogli pozivati ​​na određenu stavku u javascript kodu, zgodno je dati joj identifikator, kao što je id = miCanvas. Kada je stavka kreirana, izvršite JS kod koji čini crteže. To bi trebalo učiniti nakon izrade platna. Jedan od načina da to učinite je da koristite svojstvo onload. Kada se stranica učita, izvršava se funkcija drawCanvas (). Prvo što trebate učiniti jest dobiti DOM čvor pomoću naredbi: var canvas = document.getElementById ('miCanvas') i kao parametar prenijeti stavku elementa platna. Tada primaju javascript kontekstni objekt Canvas text: var context = canvas.getContext ('2d').
Postoje dva moguća konteksta: 2d za crtanje u dvije dimenzije i webgl za sliku u tri dimenzije. S objektom konteksta možete primijeniti sve značajke i svojstva povezana s njim.

Koordinatni sustav

Izvor koordinata je točka (00), vrijednosti X koordinata idu desno, a koordinate Y padaju, za razliku od tradicionalnih koordinatnih sustava. Položaj objekta izvodi se u odnosu na podrijetlo, na primjer, pravokutnik je u položaju (9070). Canvas platno je 450 u širinu i 350 u visinu za liniju: context.fillRect (00450 350). Izvući će se ispunjena figura s gornjim desnim kutom u točki (00), širinom od 450 i visinom od 350, tj. Ona će uzeti cijelo platno primjera. Za crtanje pravokutnika bez popunjavanja, primijenite: strokeRect (x, y, širina, visina). Canvas nema određene funkcije za crtanje poligona, uključujući trokute i peterokute (osim pravokutnika). Način rada s platnom je crtanje oblika ili staza. Da biste stvorili oblik, inicijalizirajte beginPath (), a zatim postavite pokazivač na početnu točku pomoću moveTo (x, y). Stvorit će se obrazac s raznim mogućnostima za sliku. Linije, lukovi i krivulje mogu se izvoditi pomoću: stroke (), koji izvlači otvoreni ili zatvoreni oblik bez punjenja. Ako usporedite posljednju točku od prve, obrazac će biti zatvoren. Fill () iscrtava zatvoreni oblik popune. Ako je bila otvorena, funkcija dovršava pravac od zadnje do početne točke.

Alat za ravninu ClosePath

Koristite closePath () za stvaranje ravne linije od zadnje do početne točke.
Prethodni kôd možete izvršiti kopiranjem i lijepljenjem u polje, a zatim klikom na gumb "Pokaži pisani kod".
Za prikaz krivuljaPostoje tri osnovne metode:
  • arkozi, lukovi.
  • Curvas de Bezier, krivulje Beziera.
  • Curvas cuadr? Ticas, kvadratne krivulje. Amplituda luka će ići od početnog kuta do konačnog. Mjere se u radijanima. Ako smjer vrtnje ima istinsku logičku vrijednost, luk ide suprotno od smjera kazaljke na satu. Bezierove krivulje su vrsta linija koje se vrlo često koriste u dizajnu i zahtijevaju početne, konačne i neke kontrolne točke. Najbolji način da se upoznate s Bezijevim krivuljama je da ih nacrtate pomoću programa kao što su Illustrator ili Inkscape (besplatno). Također možete koristiti bezierCurveTo simulator (cp1x, cp1y, cp2x, cp2y, x, y), gdje je cp1x, cp1y koordinate prve kontrolne točke, cp2x, cp2y je druga, a x i y koordinate krajnje točke krivulje. Kvadratne krivulje slične su prethodnim, ali imaju samo jednu kontrolnu točku - kvadratnu krivuljuTo (cp1x, cp1y, x, y), gdje su cp1x, cp1y primarne koordinate, a x i y su konačne.

    Kombiniranje oblika i stilova

    Za crtanje obrasca inicijalizirajte funkciju beginPath (), postavite pokazivač (moveTo (x, y)) da biste stvorili oblik. Da biste ga opcionalno zatvorili, koristite closePath (). Crtanje pomoću fill () izvršava se bez punjenja i crte. Taj se postupak može ponoviti onoliko puta koliko je potrebno. Proces je sličan onome kada crtate olovku na listu papira. Svaki put, kada završite s potezom i razbijete olovku iz papira kako bi je stavili u novi položaj, slične akcije se izvode pomicanjemTo (x, y).
    Uz iznimku opće formule konstrukta, postoje funkcije za crtanje pravokutnika (strokeRect (x, y, width, height) i fillRect (x, y, širina, visina) kojepočeti s moveTo (x, y) i završiti točkom ili ispunom. U ovom slučaju, sve potrebne funkcije slike su kombinirane. Svaki put, kada inicijalizirate obrazac, Canvas otvara strukturu podataka u obliku popisa koji se popunjava s naredbom kada se izvrši stroke () ili fill ().

    Crtanje linearnih gradijenta

    Canvas javascript create ima funkciju createLinearGradient (x_ini, y_ini, x_fin i and_fin). Daje linearni gradijent pomoću linije definirane početnom točkom (x_ini, y_ini) i konačnom (x_fin, y_fin). Smjer ove crte pokazuje kretanje gradijenta. Na primjer, ako želite da gradijent ide u vertikalnom smjeru, stvorite okomitu crtu. Ona definira prvu boju. Duljina označava intenzitet gradijenta. Ako koristite programe kao što je Photoshop, operacija će biti ista. Da biste dovršili definiciju gradijenta, navedite boje koje čine, koristeći funkciju: addColorStop (položaj, boja). Parametar položaja određuje mjesto na koje se primjenjuje boja označena drugim parametrom. Položaj se izražava brojem od nula do jedan. Za formiranje gradijenta potrebne su najmanje dvije različite boje. Na primjer, ako želite da započne crvenom bojom i završi s bijelom:
  • addColorStop (0 "crveno");
  • addColorStop (1 "bijelo"). Da bi nacrtao radijalne gradijente, Canvas ima funkciju: createRadialGradient (x1 y1 r1 x2 y2 r2). On definira radijalni gradijent na temelju dva kruga, od kojih svaki ima položaj središta (x, y) i radijusa (r). Ako je središte krugova oboje jednako, tada će učinak biti ujednačen, dok će u drugom slučaju nastati učinak sfere,ovisi o radijusu.

    Rad sa slikama

    Canvas može obraditi slike u najčešćim formatima (GIF, JPEG, PNG) i ima kontrolne funkcije - veličinu i rotaciju na razini piksela. To vam pruža velike mogućnosti za obradu slike pomoću tkanine. Slike možete primijeniti kao pozadine, nacrtati sličice, zumirati i mijenjati boje. Prvi korak u radu s platnom je prijenos fotografije. Postoji nekoliko načina da to učinite. Dok se ne učita u potpunosti, korisnik neće moći raditi s njom. Dva najčešća načina za preuzimanje:
  • Objekt je unutar javascripta. Koristeći novu sliku, napravite instancu objekta Image, zatim joj dodijelite ime i počnite koristiti nakon učitavanja.
  • Slika web-stranice. S oznakom učitajte sliku iz tijela web-mjesta i dodijelite joj identifikator, kao što je ime, kako biste mu pristupili iz korištenog dokumenta.getElementById.
  • Ako želite da bude vidljiv tek nakon obrade, koristite skriveno svojstvo u oznaci. Postoje i drugi načini za preuzimanje, na primjer, za korištenje stvorene slike u drugom objektu. Također se može preuzeti pomoću podataka o metodama: url. Kada je preuzimanje dovršeno, možete crtati pomoću drawImage, koji podržava nekoliko formata: drawImage (slike, x, y). Nacrtajte sliku na platnu i postavite gornji lijevi kut u koordinate (x, y). javascript platno drawimage (slika, x, y, širina, visina) omogućuje vam da veličinu slike. Prva tri parametra imaju isto značenje kao uprethodnom slučaju. Širina i visina određuju veličinu (u pikselima) u kojoj će se prikazivati ​​graf. Ako je izgled veći od izvornika, slika se povećava, a ako je manje - minijaturizacija. Ako želite da se slika ne deformira, morate održavati omjer širine i visine izvorne slike. DrawImage (slika, x1 y1 širina1 visina1 x2 y2 širina2 visina2) skalira dio slike. S ovom funkcijom, sadržaj obojenog okvira bit će prikazan na platnu i bit će uključen kao pozadina. Ova funkcija uzima dio izvorne slike definirane kao x1 y1 (širina 1 visina 1) i povlači ovaj dio u drugom položaju (x2 y2) i na drugoj skali (širina 2 visina 2). U tom slučaju, stvorite područje povećanja jer su vrijednosti širine i visine 2 veće od 1.

    Primjer korištenja ClearRect

    ClearRect crta prozirni pravokutnik na platnu. Za razliku od rect, strokeRect ili fillRect funkcija koje prikazuju obojeni oblik. Nemojte se brkati s crtanjem bijelog pravokutnika. Pozadinska slika postavljena je na CSS, na platnu se pojavljuje crni pravokutnik. Ako je zatvorena s bijelom pozadinom, transparentna će biti skrivena. Umjesto toga, najbolje je upotrijebiti značajku clearRect da biste nacrtali "čisto" pravokutnik JavaScripta na platnu preko weba, što će omogućiti da slike sjaje.
    Također možete očistiti platno postavljanjem širine ili visine - samo ih postavite na platno, dajući mu novu vrijednost:
  • //canvas.width = 600;
  • canvas.width = canvas.width.
  • ​​Time se matrica ponovno postavljatransformacija. Canvas javascript clearrect čisti sve piksele na platnu u danom pravokutniku (x, y, w, h) na prozirnu crnu boju. Funkcija clearCanvas () može se koristiti za fino podešavanje crteža i teksta platna. Ova je značajka korisna kada želite izbrisati cijeli kontekst za dodavanje novih crteža praznom rasporedu. On ga mora čistiti svaki put kad se miš pomiče i crta se nova linija. Kada se pritisne gumb "Postavi broj", na platnu se prikazuje slučajni broj od 1 do 100. Gumb "Clear" uklanja sve kontekste tako da brojevi nisu prikazani jedan iznad drugog. To će se dogoditi ako ponovno pritisnete tipku "Postavi broj". Sintaksa u ovom slučaju je: context.clearRect (x, y, w, h). Ovo je primjer koda za crtanje u pravokutniku s Canvasom javascriptom ispunjenim pomoću fillRect, koji treba očistiti središnji dio. FillRect primjenjuje širinu i visinu tkanine, dok clearRect koristi postotke od tih vrijednosti za stvaranje okvira. U ovom se primjeru prikazuje samo jasna metoda Canvas Javascript. X, y, širina i visina očišćenog pravokutnika prikazani su u postocima. Redoslijed pročišćavanja:
  • Skinite platno i nacrtajte crte na njemu.
  • Pozovite clearRect ().
  • Promijenite veličinu manipulirajući visinom i širinom weba i elementima piksela div s omjerom 1: 1.
  • Korisničke recenzije

    Canvas dobro radi s integracijom mnogih drugih proizvođača kao što su Flipgrid, Padlet i Storyline. Stoga je vrlo prikladan za dizajnera. Prijavljene su povratne informacije korisnika o funkcionalnosti usluge za rad s JavaScriptom za Canvassljedeće:
  • Koristi jednostavan uređivač bogatog teksta koji može lako stvoriti tekst, ugraditi slike i videozapise te poboljšati tekst pomoću HTML uređivača. To daje dizajneru mogućnost stvaranja više nego samo teksta na stranici.
  • Sjajno radi s dobavljačima trećih strana, integrirajući ih izravno u Canvas. Ovo svojstvo omogućuje korištenje dodatnih alata kao što su McGraw-Hill Connect, Kaltura, Box Office 365 Google Drive i još mnogo toga.
  • Platno ima kaskadni pristup organizacijskom dizajnu na razini korijenskog računa ili kao dio bilo kojeg dodatnog. Svaka pod-nasljeđuje atribute svojih "roditelja". Upravljanje svim tim elementima postalo je nevjerojatno lako zahvaljujući korištenju SIS-importa .csv datoteka. Instrukcija stalno ažurira dokumentaciju usluge.
  • Canvas je sustav za upravljanje učenjem koji može koristiti mala organizacija koja nudi samo nekoliko lekcija na lokalnoj razini ili ogromnu organizaciju koja nudi tisuće tečajeva za stotine tisuća studenata širom svijeta.
  • Skalabilnost Canvas instance je vrlo moćna. Usluga je intuitivna i dobro podešena.
  • Pruža fleksibilnu platformu na kojoj korisnik može dijeliti iskustva s drugima. Pogodno za integraciju s mnogim korisnim uslugama kao što je Drive. To je vrlo zgodno jer možete koristiti samo one značajke koje su vam potrebne.
  • Integracija s Gmail Driveom i može biti intuitivnija.
  • Odlična usluga za kupce na platnu. Dodani su novi proizvodi i poboljšanja.
  • Platno je vrlo fleksibilno, dopuštaduplicirati pojedinačne zadatke.
  • Canvas se dobro integrira s Crocodocom za online komentare i ocjenu radova, ima izvrsne funkcije uvoza.
  • Jedna od važnih značajki koje korisnici žele vidjeti je mogućnost označavanja PDF-ova ili drugih dokumenata na web-platformi Canvas. Trenutačno u web-verziji nema takvih značajki.

    Povezane publikacije