Javascript canvas: opis, karakteristike, primjeri, recenzije

Platno se kreira sa platnenom oznakom, ali kada govore o tome, odnose se na API, koji uključuje skup funkcija za crtanje, linije, pravougaonike, krugove, lukove, skaliranje, pretvaranje grafičkih elemenata.

U slučaju platna na web stranici, ovo je pravokutno područje za bitmap sliku u kojoj je svakoj koordinati dodijeljena boja. Canvas JavaScript ne kreira vektorske objekte u stilu drugih okruženja, kao što su SVG ili Flash, već samo bitmape kao crtež.

U stvari, možete otpremiti sliku na platno i manipulisati njenim pikselima jedan po jedan. Usluga je nedavno uključena u HTML i ne podržavaju je stariji pretraživači. Pogodno im je pružiti alternativni sadržaj u obliku fiksne slike ili objašnjenja.

Platno vs Flash tehnologija

Canvas JavaScript (canvas) je standardni HTML5 element koji obrađuju savremeni pretraživači. Flash je tehnologija kompanije koja zahteva instaliranje dodatka. Danas većina pretraživača ima instaliran Flash dodatak, tako da oni koji ne podržavaju Canvas i dalje funkcionišu. Međutim, dinamika razvoja ukazuje da će se situacija vrlo brzo promijeniti, jer nove platforme više ne rade sa "Flash".

Međutim, većina grafičkih stručnjaka smatra da je lakše i brže raditi sa Flash-om nego sa canvas-om, jer ima napredno okruženje za grafički dizajn (Adobe Flash CS6), a proces kreiranja Canvas JavaScript grafike je nešto teži. Situacija bi se trebala promijeniti sa pojavom okvira u papirnom stilu.js. Međutim, treba napomenuti da je nova usluga besplatna i otvorena, tako da ne morate trošiti novac na licencu. Flash je u vlasništvu kompanije Adobe. Ovo objašnjava činjenicu da se danas složene igre i dalje stvaraju uz njegovu pomoć.

Ako trebate koristiti grafiku u više rezolucija, vektorska tehnologija "Flash" je efikasniji od Rasterskog platna. Ali za većinu web grafike platno se brže učitava. Flash zahtijeva više resursa za pokretanje, tako da Canvas JavaScript ima značajnu prednost na mobilnim uređajima. Canvas vam omogućava da kreirate grafiku svih vrsta, od ravne linije do interaktivnih igara, a takođe vam omogućava da uređujete slike, menjate ton i obrube.

Atributi

Canvas je HTML element koji vam omogućava dinamičko kreiranje grafičkih i animacijskih skripti. Njegove aplikacije imaju širok spektar aplikacija: igre, interfejsi, grafički uređivači, dinamički efekti i 3D aplikacije.

Glavne prednosti usluge su što ne zahtijeva nikakav dodatni dodatak, samo jedan pretraživač koji podržava JavaScript html5 Canvas: Safari, Chrome, Firefox, Opera i Internet Explorer.

Na primjer, za crtanje dva pravougaonika različitih boja upotrijebite nekoliko API funkcija s JavaScript-om. Prvo rezervirajte prostor platna na stranici pomoću HTML oznake, a zatim nacrtajte oblike. Plasman JavaScript html5 platnenog elementa prikazan je na slici.

Ako želite, postavite druge, poput stila, kako biste odredili atribute tablica i odredili njihov izgled.

Zatim provjeravaju pretraživač za kompatibilnost sa Canvas-om, propisuju kod.

getElementById () se koristi za dobijanje elementa stranice koji se prenosi kao parametar platna. Zatim pristupaju 2D kontekstu platna i izvršavaju onoliko metoda koliko je potrebno u kontekstu za crtanje Canvas JavaScript animacijskih elemenata.

Zatim je propisana puna šifra izvršenja.

Slika Pravougaonika

Da biste nacrtali jednostavan sivi pravougaonik 450 x 350 piksela, koji zauzima cijelo platno, propišite kod.

Podaci o širini i visini određuju veličinu površine. Položaj koji ovo platno zauzima unutar weba bit će određen mjestom gdje je napisan HTML element. Primjeri JavaScript platna, mogu se postaviti unutar tabele ili unutar plutajućeg spremnika.

Ako platforma ne podržava stil, pojaviće se tekst " Vaš pretraživač ne podržava platno. Zatim stavite oznaku sa snimanjem crteža koji stvara platno. Da biste se mogli pozvati na određeni element u Javascript kodu, prikladno mu je dati identifikator, na primjer, id = miCanvas.

Kada je element kreiran, JS kod se izvršava, što čini crteže. Ovo bi trebalo da se uradi nakon kreiranja platna. Jedna od metoda izvršenja je korištenje svojstva onLoad. Čim se stranica učita, izvršava se funkcija drawCanvas() .

Prvi, stvar za da li je da dobijete DOM čvor koristeći uputstva: var canvas = dokument.getElementById (`miCanvas`) i proslijedite ID elementa platna kao parametar. Zatim dobijaju JavaScript Canvas text context object: var context = canvas.getContext (`2d`).

Postoje dva moguća konteksta: 2d za crtanje u dvije dimenzije i webgl za sliku u tri dimenzije. Imajući kontekstni objekt, možete primijeniti sve funkcije i svojstva povezana s njim.

Koordinatni sistem

Ishodište koordinata je tačka (0,0), vrijednosti X koordinate idu desno, a vrijednosti Y koordinate se spuštaju, za razliku od tradicionalnih koordinatnih sistema. Objekat se postavlja u odnosu na ishodište, na primer, pravougaonik se nalazi na poziciji (90,70). Veličina platna platna je 450 u širini i 350 u visini za red: kontekst.fillRect (0, 0, 450, 350). Ispunjena figura će biti nacrtana gornjim desnim uglom na tački (0,0), širine 450 i visine 350, odnosno zauzimaće celo platno primera. Za crtanje pravougaonika bez punjenja koristite: strokeRect (x, y, širina, visina).

Platno nema posebne funkcije za crtanje poligona, uključujući trouglove i peterokute (osim pravougaonika). Način rada sa platnom je crtanje oblika ili staza. Da biste napravili obrazac, prvo inicijalizirajte beginPath(), a zatim postavite kursor na početnu tačku koristeći moveTo (x, y). Biće kreiran obrazac sa različitim mogućnostima za sliku.

Linije, lukovi i krivine mogu se izvršiti pomoću: poteza (), koji crta otvoreni ili zatvoreni oblik bez punjenja. Ako posljednju tačku uskladite s prvom, obrazac će biti zatvoren. Fill () crta zatvoreni oblik sa ispunom. Ako je otvorena, funkcija stvara pravu liniju od posljednje do početne tačke kako bi je dovršila.

closePath alat za kreiranje pravih linija

Koristite closePath () da kreirate pravu liniju od posljednje do početne tačke.

Prethodni kod možete izvršiti kopiranjem i lijepljenjem u polje, a zatim kliknite na "Prikaži pisani kod".

Postoje tri glavne metode za crtanje krivina:

• Arcos, arcs.
• Curvas de Bezier, Bezier curves.
• Curvas cuadráticas, kvadratne krive.

Amplituda luka će ići od početnog ugla do konačnog. Mjere se u radijanima. Ako parametar smjera rotacije ima istinsku logičku vrijednost, luk će ići u smjeru suprotnom od kazaljke na satu.

Bezier - krive su tip linija, to su veoma često se koristi u dizajnu i zahtijeva početnu, završnu, kao i neke kontrolne tačke. Najbolji način da se upoznate sa bezierovim krivuljama je da ih nacrtate pomoću programa kao što su Illustrator ili Inkscape (besplatno). Možete koristiti i beziercurveto simulator (cp1x, cp1y, cp2x, cp2y, x, y), gdje su cp1x, cp1y koordinate prve kontrolne tačke, cp2x, cp2y su druge, a x i y su koordinate krajnje tačke krive.

Kvadratne krive su slične prethodnim, ali imaju samo jednu kontrolnu tačku-quadraticCurveTo (cp1x, cp1y, x, y), gdje su cp1x, cp1y primarne koordinate, a x i y krajnje koordinate.

Kombinacija oblika i stilova

Za crtanje oblika, inicijalizirajte funkciju beginPath (), postavite kursor (pomaknite se (x, y)) da kreirate oblike. Za opciono zatvaranje koristi se closePath () . . Crtanje sa ispunom () vrši se bez punjenja i moždanog udara. Ovaj proces se može ponoviti onoliko puta koliko je potrebno. Proces je sličan crtanju olovkom na komad papira. Svaki put kada se potez završi i olovka se otkine sa papira Da bi se postavila u novu poziciju, pomeriteda (x, y) obavlja slične radnje.

Izuzetak od opće formule konstrukcije su funkcije za crtanje pravougaonika (strokeRect (x, y, width, height) i fillRect (x, y, width, height)), koje počinju pokretom (x, y) i završavaju potezom ili ispunom. U ovom slučaju kombinuju sve funkcije slike koje su potrebne. Svaki put kada se obrazac inicijalizira, platno otvara strukturu podataka u obliku liste, koja je ispunjena uputstvom kada moždani udar() ili popunite().

Izvodi se crtanje linearnih Gradijenata

Canvas JavaScript kreiranje ima funkciju: createLinearGradient (x_ini, y_ini, x_fin i and_fin). Daje linearni gradijent pomoću linije definirane početnom tačkom (x_ini, y_ini) i završnom tačkom (x_fin, y_fin). Smjer ove prave linije pokazuje kretanje gradijenta. Na primjer, ako želite da gradijent ide u vertikalnom smjeru, kreirajte okomitu liniju. Određuje njegovu prvu boju. Dužina označava intenzitet gradijenta. Ako se koriste programi poput Photoshopa, operacija će biti slična. Da biste završili definiranje gradijenta, navedite boje koje ga formiraju pomoću funkcije: addColorStop (pozicija, boja).

Parametar position određuje odakle se primjenjuje boja navedena drugim parametrom. Pozicija se izražava kao broj od nule do jedan. Najmanje dvije različite boje potrebni su za formiraju gradijent. Na primjer, ako želite da počne crvenom bojom, a završi bijelom bojom:

• addColorStop (0, "crveno");
• addColorStop (1, "bijelo").

Za crtanje radijalnih Gradijenata platno ima funkciju: createRadialGradient (x1, y1, r1, x2, y2, r2).

Definira radijalni gradijent na osnovu dva kruga, svaki sa položajem svog centra (x, y) i radijusa (r). Ako je centar oba kruga isti, onda će efekat biti ujednačen, dok će se u drugom slučaju stvoriti efekat sfere, u zavisnosti od poluprečnika.

Rad sa slikama

Platno može raditi sa slikama u najčešći formate (GIF, JPEG, PNG) i ima kontrolne funkcije-veličinu i rotaciju na nivou piksela. To daje velike mogućnosti za obradu crteža pomoću platna. Možete primijeniti sliku kao pozadinu, napraviti skice, zumirati i promijeni boju.

Prvi korak rada sa platnom je postavljanje fotografije. Postoje više načina da biste to učinili. Dok se potpuno ne učita, korisnik neće moći da radi sa njim. Dva najčešća načina za preuzimanje:

1. Objekat unutar Javascripta. Koristeći novu sliku, kreirajte instancu objekta slike, zatim joj dodijelite ime i počnite ga koristiti nakon učitavanja.
2. Slika stranice. Koristeći oznaku, učitavaju crtež sa tela sajta i dodeljuju mu identifikator, na primer, ime, kako bi mu pristupili iz korišćenog dokumenta.getElementById.

Ako želite da bude vidljiv tek nakon obrade, upotrijebite skriveno svojstvo u oznaci. Postoje i drugi načini za učitavanje, na primjer, za korištenje kreiranog crteža u drugom objektu. Takođe se može učitati metodom data: url. Kada se preuzimanje završi, možete crtati koristeći drawImage, koji podržava nekoliko formata: drawImage (slika, x, y). Nacrtajte sliku na platnu postavljanjem gornjeg lijevog ugla u koordinate (x, y).

JavaScript canvas drawimage (slika, x, y, širina, visina) vam omogućava da skalirate crtež. Prva tri parametra imaju istu vrijednost kao u prethodnom slučaju. Širina i visina određuju veličinu (u pikslama) u kojoj će se grafikon prikazati. Ako je izgled veći od originala, slika se uvećava, a ako je manja, minijaturizira se. Ako je potrebno da se slika ne deformiše, potrebno je održavati odnos širine i visine originalne slike.

drawImage (slika, x1, y1, width1, visina1, x2, y2, širina2, visina2) skalira dio crteža. Sa ovom funkcijom, samo sadržaj okvira u boji biće prikazan na platnu, uključen je kao pozadina. Ova funkcija uzima dio originalne slike definirane kao x1, y1 (širina 1, visina 1) i crta ovaj dio na drugoj poziciji (x2, y2) i na drugoj skali (širina 2, visina 2). U ovom slučaju stvara se povećanje površine jer su vrijednosti širine i visine 2 veće od 1.

Primjer korištenja clearRect-a

clearRect crta transparentan pravougaonik na platnu. Za razliku od funkcije rect, strokeRect ili fillRect, koji prikazuju oblik u boji. Ovo ne treba miješati sa crtanjem bijelog pravougaonika.

Pozadinsku sliku postavlja CSS, na platnu se prikazuje crni pravougaonik. Ako ga zatvorite bijelom pozadinom, prozirna će biti skrivena. Umjesto toga, bolje je koristiti funkciju clearRect za crtanje JavaScript platna "čistog" pravougaonika preko platna, omogućavajući tako da crteži zasjaju.

Također možete očistiti platno postavljanjem širine ili visine - samo ih postavite na platno, dodjeljujući mu novu vrijednost:

• // platno.širina = 600;
• kanafas.širina = platno.širina.

Ovo resetuje matricu transformacije.

Canvas JavaScript clearrect briše sve piksele na platnu u datom pravougaoniku (x, y, w, h) do transparentne crne boje. Funkcija ClearCanvas () može se koristiti za precizno čišćenje crteža i teksta platna. Ova funkcija je korisna kada je potrebno da izbrišete cijeli kontekst za dodavanje novih crteža na prazan izgled. Mora to očistiti svaki put kada se miš pomjeri i povuče nova linija.

Kada se pritisne dugme "Postavi broj", na platnu se prikazuje slučajan broj od 1 do 100. Dugme" Obriši " uklanja sve iz konteksta kako ne bi prikazalo brojeve jedan iznad drugog. Ovo će se desiti ako ponovo kliknete na dugme " Postavi Broj.

Sintaksa u ovom slučaju je: kontekst.clearRect (x, y, w, h).

Ovo je primjer koda za crtanje ispunjenog pravougaonika u JavaScript platnu koristeći fillRect, koji treba očistiti središnji dio. fillRect primjenjuje širinu i visinu platna, a clearRect koristi procente ovih vrijednosti za kreiranje okvira. Ovaj primjer prikazuje samo Canvas JavaScript clear metodu. X, y, širina i visina očišćenog pravougaonika prikazani su u procentima.

Redoslijed čišćenja:

• Učitajte platno i nacrtajte linije na njemu.
• Pozovite clearRect().
• za promjenu veličine manipuliranjem širine i visine platna i DIV elemenata s omjerom piksela 1:1.

Recenzije Korisnika

Canvas radi odličan posao integrirajući mnoge dobavljače treće strane, kao što su Flipgrid, Padlet i Storyline. Stoga je veoma zgodan za dizajnera.

U recenzijama korisnici navode sljedeće o funkcionalnosti usluge za rad sa platnenim JavaScript-om:

• Koristi jednostavan uređivač bogatog teksta, koji olakšava stvaranje teksta, umetanje slika i video zapisa, poboljšanje teksta pomoću HTML uređivača. Ovo daje dizajneru mogućnost da kreira više od samo teksta na stranici.
• Odlično radi sa dobavljačima treće strane, integrišući ih direktno u Canvas. Ova nekretnina vam omogućava korištenje dodatnih alata kao što su McGraw-Hill Connect, Kaltura, Box, Office 365, Google Drive i mnogi drugi.
• Canvas ima kaskadni pristup organizacionom dizajnu na nivou root računa ili unutar bilo kojeg dodatnog. Svaki podračun nasljeđuje atribute svog "roditelji". Upravljanje svim ovim elementima postalo je nevjerovatno jednostavno zahvaljujući upotrebi SIS-importa .csv datoteka. Uputstvo stalno ažurira servisnu dokumentaciju.
• Platno je sistem upravljanja učenjem, koju može koristiti mala organizacija koja nudi samo nekoliko lekcija lokalno, ili gigantska organizacija koja nudi hiljade kursevi za stotine hiljada studenata širom svijeta.
• Skalabilnost instance platna je vrlo moćna. Usluga je intuitivna i veoma prilagodljiva.
• Pruža fleksibilnu platformu na kojoj korisnik može podijeliti iskustvo sa drugima. Pogodno za integraciju sa mnogim korisnim uslugama, kao što je pogon. Ovo je prilično prikladno, jer možete koristiti samo one funkcije koje su potrebne.
• Integracija sa pogonom i Gmailom može biti intuitivnija.
• Canvas ima odličnu uslugu za korisnike. Dodani novi proizvodi i poboljšanja.
• Platno je veoma fleksibilno, omogućava vam dupliranje pojedinačnih zadataka.
• Canvas se dobro integriše sa Crocodoc-om za online komentarisanje i evaluaciju radova, ima odlične uvozne funkcije.

Jedna od važnih karakteristika koju bi korisnici željeli vidjeti je mogućnost označavanja PDF datoteka ili drugih dokumenata na web platformi Canvas. Trenutno ne postoji takva funkcija u web verziji.