Platno je sestavljeno iz oznake platna, vendar se pri sklicevanju nanjo sklicuje na API, ki vključuje nabor funkcij za risanje linij, pravokotnikov, krogov, lokov, lestvice in preoblikovanje grafičnih elementov. V primeru platna na spletni strani je to pravokotno območje za rastrsko sliko, kjer je vsaki koordinati dodeljena barva. Javascript javascript ne ustvarja vektorskih objektov v slogu drugih okolij, kot sta SVG ali Flash, temveč le rastrski kot slika. Pravzaprav lahko naložite sliko na platno in jo upravljate s piksli enega za drugim. Storitev je bila pred kratkim vključena v HTML in jo stari brskalniki ne podpirajo. Zanje je primerno, da zagotovijo alternativne vsebine v obliki fiksne risbe ali pojasnjevalnega besedila.

Tehnologija Canvas vs. Flash

Javascript (canvas) platno je standardni HTML5 element, ki ga upravljajo moderni brskalniki. Flash je tehnološko podjetje, ki zahteva namestitev vtičnika. Danes ima večina brskalnikov nameščen vtičnik Flash, tako kot prej pa obstajajo tudi tisti, ki ne podpirajo Canvas. Vendar pa dinamika razvoja kaže, da se lahko razmere zelo hitro spremenijo, saj nove platforme ne delujejo več z "Flashom". Vendar pa večina grafičnih oblikovalcev ugotavlja, da je delo z Flashom lažje in hitreje kot s spletnim vložkom, saj ima napredno okolje za grafično oblikovanje (Adobe Flash CS6), proces ustvarjanja grafike javascriptov v platnu pa je nekoliko težji. Stanje bi se moralo spremeniti s pojavom okvirov s slogom papirja. Vendar pa ne pozabite, da je novaStoritev je brezplačna in odprta, tako da vam ni treba porabiti denarja za licenco. Flash je last podjetja Adobe. To je mogoče razložiti z dejstvom, da se danes z njegovo pomočjo še vedno ustvarjajo kompleksne igre.


Če želite uporabiti grafiko v več resolucijah, je vektorska tehnologija "Flash" bolj učinkovita kot Canvas raster. Toda za večino spletnih grafike se tkanina hitreje nalaga. Flash zahteva več sredstev za izvajanje, tako da ima mobilna naprava bistveno prednost. Platno vam omogoča ustvarjanje grafike vseh vrst, od ravne linije do interaktivnih iger, prav tako pa vam omogoča urejanje slik, spreminjanje tona in meja.

Atribut atributa

Canvas je element HTML, ki vam omogoča dinamično ustvarjanje grafike in animacije skriptov. Njegove aplikacije imajo širok spekter aplikacij: igre, vmesniki, urejevalniki slik, dinamični učinki in 3D aplikacije. Glavne prednosti storitve - ne zahteva nobenega dodatnega vtičnika, samo en brskalnik, ki podpira javascript html5 Canvas: Safari, Chrome, Firefox, Opera in Internet Explorer. Če želite na primer narisati dva pravokotnika različnih barv, uporabite nekaj funkcij API-ja javascript. Prvič, prostor platna na strani je rezerviran, z uporabo oznake HTML in nato nariše oblike. Na fotografiji je prikazan element javascript html5 Canvas. Neobvezno so tudi drugi, kot je slog, namenjeni določanju atributov tabele in določanju njihovega videza. Nato preverite združljivost brskalnika s Canvas, predpišite kodo. Z getElementById () dobite element strani, ki jePreneseno kot parameter platna. Nato dobijo dostop do 2D konteksta platna in izvedejo toliko metod, kot je potrebno v kontekstu za risanje animacijskih elementov javascripta na platnu.
Nato napišite celoten kodeks izvajanja.

Slika pravokotnika

Za risanje preprostega sivega pravokotnika 450 x 350 slikovnih pik, ki pokriva celotno platno, napišite kodo. Širina in višina podatkov določata velikost površine. Položaj, ki ga zaseda ta spletna stran, je določen glede na kraj, kjer je napisan element HTML. Primeri javascript platna lahko postavite znotraj tabele ali znotraj plavajočega vsebnika. Če platforma ne podpira sloga, se bo prikazalo besedilo »Vaš brskalnik ne podpira Canvas«. Nato postavite oznako z zajemom slike, ki ustvari platno. Da se lahko sklicujete na določeno postavko v kodi javascript, je primerno, da ji podate identifikator, kot je id = miCanvas. Ko je postavka ustvarjena, izvedite kodo JS, ki izdeluje risbe. To je treba storiti po ustvarjanju platna. Eden od načinov za to je uporaba lastnosti onload. Ko je stran naložena, se izvede funkcija drawCanvas (). Prva stvar, ki jo je treba narediti, je dobiti vozlišče DOM z navodili: var canvas = document.getElementById ('miCanvas') in kot parameter podati element elementa platna. Nato prejmejo javascript kontekstni objekt Canvas text: var context = canvas.getContext ('2d').
Obstajata dve možnosti: 2d za risanje v dveh dimenzijah in webgl za sliko v treh dimenzijah. Z objektom konteksta lahko uporabite vse funkcije in lastnosti, ki so z njim povezane.

Koordinatni sistem

Koordinatni izvor je točka (00), vrednosti X koordinat se pomaknejo v desno in koordinate Y se zmanjšajo za razliko od tradicionalnih koordinatnih sistemov. Lokacija objekta se izvede glede na izvor, na primer pravokotnik je v položaju (9070). Canvas platno je širine 450 in višine 350 za vrstico: context.fillRect (00450 350). Vlečena bo napolnjena slika z zgornjim desnim vogalom v točki (00), širina 450 in višina 350, tj. Celotno platno primera. Za risanje pravokotnika brez polnila uporabite: strokeRect (x, y, širina, višina). Canvas nima določenih funkcij za risanje poligonov, vključno s trikotniki in peterokotniki (razen pravokotnika). Način dela s platnom je risanje oblik ali poti. Če želite ustvariti obliko, najprej inicializirajte beginPath (), nato postavite kazalec na začetno točko s pomočjo moveTo (x, y). Ustvarjen bo obrazec z različnimi možnostmi za sliko. Linije, loki in krivulje se lahko izvedejo z uporabo: stroke (), ki črpa odprto ali zaprto obliko brez polnjenja. Če primerjate zadnjo točko od prvega, bo obrazec zaprt. Fill () nariše zaprto obliko polnila. Če je bila odprta, funkcija ustvari ravno črto od zadnje do začetne točke, da jo dokonča.

Orodje premice ClosePath

Uporabite closePath (), da ustvarite premico od zadnje do začetne točke. Prejšnjo kodo lahko izvedete tako, da jo kopirate in prilepite v polje, nato pa kliknete gumb "Pokaži napisano kodo". ] Za prikaz krivuljObstajajo tri osnovne metode:

arcos, loki.

Curvas de Bezier, krivulje Bezier.

Curvas cuadr? Ticas, kvadratne krivulje.

Amplituda loka se bo gibala od začetnega kota do končnega. Merijo se v radianih. Če ima smer vrtenja resnično logično vrednost, lok poteka v nasprotni smeri urinega kazalca. Bezierjeve krivulje so vrsta linij, ki se zelo pogosto uporabljajo pri oblikovanju in zahtevajo začetne, končne in tudi nekatere kontrolne točke. Najboljši način za spoznavanje Bezierjevih krivulj je, da jih narišete s pomočjo programov, kot sta Illustrator ali Inkscape (brezplačno). Uporabite lahko tudi simulator bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y), kjer je cp1x, cp1y koordinate prve kontrolne točke, cp2x, cp2y je druga, in x in y koordinata končne točke krivulje. Kvadratne krivulje so podobne prejšnjim, vendar imajo samo eno kontrolno točko - kvadratno krivuljoTo (cp1x, cp1y, x, y), kjer so cp1x, cp1y primarne koordinate, x in y pa končni.

Združevanje obrazcev in stilov

Za risanje obrazca inicializirajte funkcijo beginPath (), postavite kazalec (premakniT (x, y)), da ustvarite obliko. Če želite izbirno zapreti, uporabite closePath (). Risanje z uporabo fill () se izvede brez polnjenja in poteze. Ta postopek se lahko ponovi tolikokrat, kot je potrebno. Postopek je podoben tistemu, ko narišemo svinčnik na list papirja. Vsakič, ko končate kap in lomite svinčnik iz papirja, da ga postavite v nov položaj, se podobna dejanja izvedejo z moveTo (x, y).
Z izjemo splošne formule konstrukta obstajajo funkcije za risanje pravokotnikov (strokeRect (x, y, width, height) in fillRect (x, y, širina, višina), kizačnite z moveTo (x, y) in se konča s piko ali polnilom. V tem primeru se združijo vse potrebne funkcije slike. Vsakič, ko inicializirate obrazec, Canvas odpre strukturo podatkov v obliki seznama, ki je izpolnjen z ukazom, ko se izvedejo poteza () ali fill ().

Risanje linearnih gradientov

Canvas javascript create ima funkcijo createLinearGradient (x_ini, y_ini, x_fin in and_fin). Daje linearni gradient z uporabo linije, ki jo določa začetna točka (x_ini, y_ini) in končna (x_fin, y_fin). Smer te vrstice kaže gibanje gradienta. Na primer, če želite, da gradient gre v navpični smeri, ustvarite navpično črto. Določa prvo barvo. Dolžina označuje intenziteto preliva. Če uporabljate programe, kot je Photoshop, bo operacija enaka. Če želite dokončati definicijo gradienta, določite barve, ki jo naredijo, z uporabo funkcije: addColorStop (položaj, barva). Parameter položaja določa, na katero mesto se nanaša barva, ki jo označuje drugi parameter. Položaj je izražen s številom od nič do enega. Za oblikovanje preliva sta potrebni vsaj dve različni barvi. Na primer, če želite, da se začne z rdečo in konča z belo:

addColorStop (0 "rdeča");

addColorStop (1 "bela").

Za risanje radialnih gradientov ima Canvas funkcijo: createRadialGradient (x1 y1 r1 x2 y2 r2). Določa radialni gradient, ki temelji na dveh krogih, od katerih ima vsak svoj položaj (x, y) in polmer (r). Če je središče krogov obeh enakih, bo učinek enak, medtem ko bo v drugem primeru ustvarjen učinek krogle, kiodvisen od polmera.

Delo s slikami

Canvas lahko obdeluje slike v najpogostejših oblikah (GIF, JPEG, PNG) in ima nadzorne funkcije - velikost pikslov in rotacijo. Tako dobite veliko možnosti za obdelavo slik s krpo. Slike lahko uporabite kot ozadja, narišete sličice, povečate in spremenite barve. Prvi korak pri delu s platnom je prenos fotografije. To lahko storite na več načinov. Dokler ni v celoti naložen, uporabnik ne bo mogel delati z njim. Dva najpogostejša načina za prenos:

Objekt je v javascriptu. Z novo sliko ustvarite primerek objekta Image, nato mu dodelite ime in ga začnite uporabljati po nalaganju.

Slika spletne strani. Z oznako prenesite sliko iz telesa mesta in ji dodelite identifikator, kot je ime, za dostop do uporabljenega dokumenta.getElementById.

Če želite, da je vidna šele po obdelavi, uporabite skrito lastnost v oznaki. Obstajajo tudi drugi načini prenosa, na primer za uporabo ustvarjene slike v drugem objektu. Lahko ga prenesete tudi z uporabo podatkov metode: url. Ko je prenos končan, lahko narišete z uporabo drawImage, ki podpira več formatov: drawImage (slike, x, y). Na platnu narišite sliko, tako da v levem zgornjem kotu postavite koordinate (x, y). javascript platno drawimage (slika, x, y, širina, višina) vam omogoča, da spremenite velikost slike. Prvi trije parametri imajo enak pomen kot vprejšnjem primeru. Širina in višina določata velikost (v slikovnih pikah), v kateri bo prikazan graf. Če je postavitev večja od izvirnika, se slika poveča in, če je manj - miniaturizacija. Če želite, da se slika ne deformira, morate ohraniti razmerje med širino in višino izvirne slike. DrawImage (slika, x1 y1 širina1 višina1 x2 y2 širina2 višina2) obsega del slike. S to funkcijo bo na platnu prikazana vsebina obarvanega okvirja, ki bo vključena kot ozadje. Ta funkcija prevzame del prvotne slike, ki je definirana kot x1 y1 (širina 1 višina 1) in ta del nariše v drugem položaju (x2 y2) in na drugi lestvici (širina 2 višina 2). V tem primeru ustvarite povečanje območja, ker so vrednosti širine in višine 2 večje od 1.

Primer uporabe ClearRect

ClearRect na platnu nariše pregleden pravokotnik. Za razliko od funkcij rect, strokeRect ali fillRect, ki prikazujejo barvno obliko. Ne zamenjajte z risanjem belega pravokotnika. Slika ozadja je nastavljena na CSS, na platnu se prikaže črni pravokotnik. Če je zaprto z belim ozadjem, bo prosojnica skrita. Namesto tega je najbolje, da uporabite funkcijo clearRect, da narišete "čist" pravokotnik na platnu Canvas prek spleta in tako omogočite, da slike zasijejo. Platno lahko očistite tudi tako, da nastavite širino ali višino - preprosto jih nastavite na platno in mu podate novo vrednost:

//canvas.width = 600;

canvas.width = canvas.width.

​​To ponastavi matricopreoblikovanje Canvas javascript clearrect čisti vse slikovne pike na platnu v danem pravokotniku (x, y, w, h) na prosojno črno. Funkcijo clearCanvas () lahko uporabite za fino nastavitev risbe in besedila platna. Ta funkcija je uporabna, če želite izbrisati celoten kontekst in dodati nove risbe v prazno postavitev. Čistiti ga mora vsakič, ko se premakne miš in se nariše nova vrstica. Ko pritisnete gumb "Set number", se na platnu prikaže naključno število od 1 do 100. Gumb »Počisti« odstrani vse kontekste, tako da številke niso prikazane ena nad drugo. To se bo zgodilo, če ponovno pritisnete gumb "Set number". Sintaksa v tem primeru je: context.clearRect (x, y, w, h). To je primer kode za risanje v pravokotniku, ki ga je napolnil Javascript, z uporabo fillRect, ki mora počistiti osrednji del. FillRect uporablja širino in višino tkanine, medtem ko clearRect uporablja odstotke teh vrednosti za ustvarjanje okvira. V tem primeru je prikazana samo jasna metoda Canvas javascript. X, y, širina in višina očiščenega pravokotnika so prikazani v odstotkih. Zaporedje čiščenja:

Prenesite platno in narišite črte na njem.

Pokliči clearRect ().

Spremenite velikost z manipuliranjem višine in širine spleta in elementov piksel div z razmerjem 1: 1. in zgodba. Zato je zelo priročno za oblikovalca. Povratne informacije uporabnika o funkcionalnosti storitve za delo z Javascriptom smo prijavilinaslednje:

uporablja preprost urejevalnik obogatenega besedila, ki lahko preprosto ustvarja besedilo, vdeluje slike in videe ter izboljšuje besedilo z urejevalnikom HTML. To daje oblikovalcu možnost ustvariti več kot samo besedilo na strani.

Odlično deluje s ponudniki tretjih oseb, ki jih integrirajo neposredno v Canvas. Ta lastnost vam omogoča uporabo dodatnih orodij, kot so McGraw-Hill Connect, Kaltura, Box Office 365 Google Drive in še veliko več.

Platno ima kaskadni pristop k oblikovanju organizacije na ravni računa root ali kot del dodatnih. Vsak od njih podeduje atribute svojih "staršev". Upravljanje vseh teh elementov je postalo neverjetno enostavno zaradi uporabe SIS-uvoza datotek .csv. Inštrukcija stalno posodablja dokumentacijo storitve.

Canvas je sistem za upravljanje učenja, ki ga lahko uporablja majhna organizacija, ki ponuja le nekaj lekcij na lokalni ravni ali ogromno organizacijo, ki ponuja na tisoče tečajev za več sto tisoč študentov po vsem svetu.

Skalabilnost primera Canvas je zelo močna. Storitev je intuitivna in dobro nastavljena.

Zagotavlja prilagodljivo platformo, kjer lahko uporabnik izmenjuje izkušnje z drugimi. Primerna za integracijo s številnimi uporabnimi storitvami, kot je Drive. To je zelo priročno, ker lahko uporabljate samo funkcije, ki jih potrebujete.

Integracija z Gmail Drive in je lahko bolj intuitivna.

Odlična storitev za stranke s platna. Dodani so bili novi izdelki in izboljšave.

Platno je zelo fleksibilno, kar omogočapodvajati posamezne naloge.

Canvas se dobro povezuje s Crocodocom za spletne komentarje in ocenjevanje del, ima odlične uvozne funkcije.

Ena od pomembnih funkcij, ki bi jo uporabniki želeli videti, je zmožnost označevanja dokumentov PDF ali drugih dokumentov na spletni platformi Canvas. Trenutno v spletni različici ni takšnih funkcij.