Plátno pozostáva z tagu plátno, ale pri jeho odvolávaní sa odkazuje na rozhranie API, ktoré obsahuje súbor funkcií pre transformáciu línií, obdĺžnikov, kruhov, oblúkov, škálovanie a grafické prvky. V prípade plátna na webovej stránke ide o obdĺžnikovú oblasť pre rastrový obrázok, v ktorom je každej súradnici priradená farba. Plátno javascript nevytvára vektorové objekty v štýle iných prostredí, ako je SVG alebo Flash, ale len ako rastrový obrázok. V skutočnosti môžete odovzdať obrázok na plátno a manipulovať ho s pixelmi jeden po druhom. Služba bola nedávno zahrnutá do HTML a nie je podporovaná starými prehliadačmi. Pre nich je vhodné poskytnúť alternatívny obsah vo forme pevného výkresu alebo vysvetľujúceho textu.
Plátno verzus technológia Flash
Plátno javascript (plátno) je štandardný prvok HTML5 ovládaný modernými prehliadačmi. Flash je technologická spoločnosť, ktorá vyžaduje inštaláciu doplnku. Dnes väčšina prehliadačov má nainštalovaný doplnok Flash, tak ako predtým existujú tie, ktoré nepodporujú plátno. Dynamika vývoja však naznačuje, že situácia sa môže veľmi rýchlo zmeniť, keďže nové platformy už nefungujú s programom Flash. Avšak väčšina grafických návrhárov zisťuje, že práca s programom Flash je jednoduchšia a rýchlejšia ako s webbed, pretože má pokročilé grafické prostredie (Adobe Flash CS6) a proces tvorby grafiky Canvas javascript je o niečo ťažší. Situácia by sa mala zmeniť vzhľadom na vzhľad rámcov v štýle paper.js. Majte však na pamäti, že novýSlužba je bezplatná a otvorená, takže nepotrebujete minúť peniaze na licenciu. Flash vlastní spoločnosť Adobe. Vysvetľuje to skutočnosť, že v súčasnosti sú s jeho pomocou vytvorené komplexné hry.
Ak chcete použiť grafiku vo viacerých rozlíšeniach, vektorová technológia "Flash" je účinnejšia ako raster Canvas. Ale pre väčšinu webovej grafiky sa tkanina načíta rýchlejšie. Flash vyžaduje viac zdrojov na spustenie, takže na mobilnom zariadení má javascript Canvas významnú výhodu. Plátno vám umožňuje vytvárať grafiky všetkých druhov, od priamej hry po interaktívne hry, a tiež vám umožňuje upravovať obrázky, meniť tón a hranice.
Atribút atribútu
Canvas je prvok HTML, ktorý vám umožňuje dynamicky vytvárať grafiku a skriptovacie animácie. Jeho aplikácie majú širokú škálu aplikácií: hry, rozhrania, editory obrázkov, dynamické efekty a 3D aplikácie. Hlavné výhody služby - nevyžaduje žiadne ďalšie plug-in, len jeden prehliadač, ktorý podporuje javascript html5 Canvas: Safari, Chrome, Firefox, Opera a Internet Explorer. Napríklad, ak chcete nakresliť dva obdĺžniky rôznych farieb, použite niekoľko funkcií rozhrania javascript API. Najprv je priestor na plátne na stránke rezervovaný pomocou značky HTML a potom nakreslite tvary. Umiestnenie elementu javascript html5 Canvas sa zobrazí na fotografii.
Voliteľne sú umiestnené iné, napríklad štýl, na špecifikovanie atribútov tabuľky a určenie ich vzhľadu. Potom skontrolujte, či je prehliadač kompatibilný s Canvas, predpíšte kód.
Pomocou getElementById () získate prvok stránky, ktorý jePrenesené ako parameter Canvas. Potom získajú prístup k 2D kontextu plátna a vykonávajú toľko metód, koľko je potrebných v kontexte kreslenia animačných prvkov javascriptu Canvas. Potom napíšte úplný kód vykonania.
Obrázok obdĺžnika
Ak chcete nakresliť jednoduchý šedý obdĺžnik s rozmermi 450 x 350 pixlov, ktorý pokrýva celé plátno, napíšte kód.
Šírka a výška údajov určujú veľkosť povrchu. Poloha obsadená touto webovou stránkou závisí od miesta, kde je písaný prvok HTML. Príklady plátna javascript môžu byť umiestnené vo vnútri stola alebo vo vnútri plovoucej nádoby. Ak platforma tento štýl nepodporuje, objaví sa text "Váš prehliadač nepodporuje plátno". Potom vložte značku so zachytávaním obrazu, ktorý vytvorí plátno. Aby sme mohli odkazovať na konkrétnu položku v kóde javascript, je vhodné jej dať identifikátor, napríklad id = miCanvas. Keď je položka vytvorená, spustite kód JS, ktorý vytvára výkresy. Toto by sa malo vykonať po vytvorení plátna. Jedným zo spôsobov, ako to urobiť, je použiť vlastnosť onload. Po načítaní stránky sa vykoná funkcia drawCanvas (). Prvá vec, ktorú musíte urobiť, je dostať uzol DOM pomocou inštrukcií: var canvas = document.getElementById ('miCanvas') a vyjadriť ako parameter prvok plátna. Potom dostanú kontext kontext javascript Canvas text: var context = canvas.getContext ('2d'). Existujú dva možné kontexty: 2d pre kreslenie v dvoch rozmeroch a webgl pre obraz v troch rozmeroch. Pomocou kontextového objektu môžete použiť všetky funkcie a vlastnosti, ktoré sú s ním spojené.
Súradnicový systém
Začiatok súradnice je bod (00), hodnoty súradníc X smerujú doprava a súradnice Y zostávajú na rozdiel od tradičných súradnicových systémov. Umiestnenie objektu sa vykonáva vzhľadom na pôvod, napríklad obdĺžnik je v polohe (9070). Plátno plátna je 450 na šírku a 350 na výšku pre linku: context.fillRect (00450 350). Bude nakreslený vyplnený obrázok s pravým horným rohom v bode (00), šírkou 450 a výškou 350, tj bude mať celé plátno príkladu. Ak chcete nakresliť obdĺžnik bez vyplnenia, použite: strokeRect (x, y, šírka, výška). Plátno nemá určité funkcie pre kreslenie mnohouholníkov vrátane trojuholníkov a päťuholníkov (s výnimkou obdĺžnika). Metóda práce s plátnom je nakresliť tvary alebo cesty. Ak chcete vytvoriť tvar, spočiatku inicializujte beginPath () a potom umiestnite kurzor na začiatočný bod pomocou funkcie moveTo (x, y). Vytvorí sa formulár s rôznymi možnosťami pre obrázok. Riadky, oblúky a krivky sa môžu vykonávať pomocou: zdvihu (), ktorý ťahá otvorený alebo uzavretý tvar bez naplnenia. Ak porovnáte posledný bod s prvým, formulár sa uzavrie. Výplň () vykreslí uzavretý tvar výplne. Ak bola otvorená, funkcia vytvorí priamku od posledného do počiatočného bodu na dokončenie.
Priamočiare nástroje ClosePath
Použite closePath () na vytvorenie priamej čiary od posledného do východiskového bodu.
Predchádzajúci kód môžete vykonať jeho kopírovaním a vložením do poľa a následným kliknutím na tlačidlo "Zobraziť písaný kód".
] Zobrazenie kriviekExistujú tri základné metódy:
arcos, oblúky.
Curvas de Beziérova, Bézierove krivky.
Curvas Cuadra? Ticas, kvadratické krivky.
Amplitúda oblúku pôjde od počiatočného ku konečnému rohu. Merajú sa v radiánoch. Ak je smer otáčania parametra má true, bude oblúk ísť proti smeru hodinových ručičiek. Bézierove krivky - typ čiar, ktoré sa často používajú v konštrukcii a vyžadujú počiatočný, konečný, a niektoré kontrolné body. Najlepší spôsob, ako vidieť krivky Bézierove - nakresliť je pomocou programov, ako je Illustrator alebo Inkscape (zdarma). Možno tiež použiť simulátor bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y), kde cp1x, cp1y - prvý kontrolný bod súradníc, cp2x, cp2y - druhý, a x a y súradnice koncového bodu krivky. Kvadratické krivky podobné tým, predchádzajúce, ale iba s jedným kontrolným bodom - quadraticCurveTo (cp1x, cp1y, x, y), kde cp1x, cp1y - počiatočné poloha, a x a y - koniec.
Kombinácie tvarov a štýlov
pre prijímacie funkciu tvar inicializuje beginPath () umiestnite kurzor (MOVETO (x, y)), pre vytvorenie tvaru. Ak chcete ho zavrieť, použite funkciu closePath (). Kreslenie pomocou výplne () sa vykonáva bez plnenia a tahu. Tento proces sa môže opakovať toľkokrát, koľkokrát je potrebné. Tento proces je podobný procesu pri kreslení ceruzky na list papiera. Zakaždým, keď povrch trhacie mŕtvice a ceruzka na papieri, umiestniť do novej polohy, plní podobnú akčné MOVETO (x, y). Výnimkou zo všeobecného vzorca stavia nástroj pre kreslenie obdĺžnikov (strokeRect (x, y, šírka, výška) a fillRect (x, y, šírka, výška)), ktorýzačať s moveTo (x, y) a končí bodkou alebo výplňou. V tomto prípade sú všetky potrebné funkcie obrazu kombinované. Zakaždým, keď inicializujete formulár, Canvas otvára štruktúru údajov vo forme zoznamu, ktorý je vyplnený inštrukciami pri vykonávaní stroja () alebo fill ().
Kreslenie lineárnych gradientov
Canvas javascript create má funkciu createLinearGradient (x_ini, y_ini, x_fin a and_fin). Poskytuje lineárny gradient pomocou čiary definovanej začiatočným bodom (x_ini, y_ini) a konečným (x_fin, y_fin). Smer tejto línie zobrazuje pohyb gradientu. Napríklad, ak chcete, aby gradient prechádzal vo vertikálnom smere, vytvorte vertikálnu čiaru. Definuje prvú farbu. Dĺžka udáva intenzitu gradientu. Ak používate programy ako Photoshop, operácia bude rovnaká. Ak chcete dokončiť definíciu gradientu, zadajte farby, ktoré to urobia, pomocou funkcie: addColorStop (pozícia, farba). Parameter polohy určuje miesto, na ktorom sa aplikuje farba označená druhým parametrom. Poloha je vyjadrená číslom od nuly do jednej. Na vytvorenie gradientu sú potrebné aspoň dve rôzne farby. Ak napríklad chcete začať s červenou farbou a končiť bielou farbou:
addColorStop (0 "červená");
addColorStop (1 "biela").
Ak chcete nakresliť radiálne prechody, Canvas má funkciu: createRadialGradient (x1 y1 r1 x2 y2 r2). Definuje radiálny gradient založený na dvoch kružniciach, z ktorých každá má polohou svojho stredu (x, y) a polomer (r). Ak je stred kruhov oboch rovnaký, potom bude efekt jednotný, zatiaľ čo v druhom prípade bude vytvorený účinok gule, ktorýzávisí od polomeru.
Práca s obrázkami
Canvas zvládne obrázky v najbežnejších formátoch (GIF, JPEG, PNG) a má ovládacie funkcie - veľkosť a rotáciu na úrovni pixelov. To vám dáva skvelé príležitosti na spracovanie obrazu pomocou handry. Môžete použiť obrázky ako pozadia, kresliť náhľady, priblížiť a meniť farby. Prvým krokom pri práci s plátnom je odovzdanie fotografie. Existuje niekoľko spôsobov, ako to urobiť. Kým nebude plne nabitý, používateľ s ním nebude môcť pracovať. Dve najbežnejšie spôsoby na stiahnutie:
Objekt je vo vnútri javascriptu. Pomocou nového obrázka vytvorte inštanciu objektu obrázka, priraďte mu meno a začnite ho používať po načítaní.
Obrázok webovej stránky. Pomocou značky môžete prevziať obrázok z tela stránky a priradiť mu identifikátor, napríklad názov, na prístup k nemu z použitého dokumentu.getElementById.
Ak chcete, aby bola viditeľná až po spracovaní, použite skrytú vlastnosť v značke. Existujú aj iné spôsoby na stiahnutie, napríklad použitie vytvoreného obrázka v inom objekte. Môžete ho tiež prevziať pomocou údajov metódy: url. Po dokončení sťahovania môžete nakresliť program drawImage, ktorý podporuje niekoľko formátov: drawImage (obrázky, x, y). Na plátno nakreslite obrázok a umiestnite ľavý horný roh do súradníc (x, y). javascript plátno (obrázok, x, y, šírka, výška) vám umožňuje zmeniť veľkosť obrázka. Prvé tri parametre majú rovnaký význam ako vv predchádzajúcom prípade. Šírka a výška určujú veľkosť (v pixeloch), v ktorej sa zobrazí graf. Ak je rozloženie väčšie ako originál, obraz sa zväčší a ak je menej - miniaturizácia. Ak chcete, aby sa obraz nedeformoval, musíte zachovať pomer šírky a výšky pôvodného obrázka. DrawImage (obrázok, x1 y1 šírka1 výška1 x2 y2 šírka2 výška2) zmeria časť obrazu. Pomocou tejto funkcie sa obsah farebného rámca zobrazí na plátne a bude zahrnutý ako pozadie. Táto funkcia preberá časť pôvodného obrazu definovaného ako x1 y1 (šírka 1 výška 1) a nasníma túto časť do inej polohy (x2 y2) a na inej mierke (šírka 2 výška 2). V tomto prípade vytvorte zvýšenie plochy, pretože hodnoty šírky a výšky 2 sú väčšie ako 1.
Príklad použitia ClearRect
ClearRect na plátne nakreslí priehľadný obdĺžnik. Na rozdiel od funkcií rect, strokeRect alebo fillRect, ktoré zobrazujú farebný tvar. Nenechajte sa zameniť s kresbou bielych obdĺžnikov. Obrázok pozadia je nastavený na CSS, na plátne sa objaví čierny obdĺžnik. Ak je zatvorené s bielym pozadím, transparentná bude skrytá. Namiesto toho je najlepšie použiť funkciu clearRect, aby ste nakresliť obdĺžnik Canvas javascript "čistý" na webe, a tým umožnili svietiť obrazy.
Môžete tiež vyčistiť plátno nastavením šírky alebo výšky - stačí ich nastaviť na plátno a dať mu novú hodnotu:
//canvas.width = 600;
canvas.width = canvas.width.
Toto obnoví maticutransformácie. Plátno JavaScript clearRect vymaže všetky pixely na plátne v tomto obdĺžniku (x, y, w, h) na transparentné čierne. Funkčné clearCanvas () možno použiť k presnému zameriavanie a čistenie textu handričkou. Táto funkcia je užitočná, ak chcete odstrániť celý kontext a pridať nové kresby do prázdneho rozloženia. Musí ho čistiť zakaždým, keď sa myš pohybuje a nakreslí sa nový riadok. Po stlačení tlačidla "Nastaviť číslo" sa na plátne zobrazí náhodné číslo od 1 do 100. Tlačidlo "Vymazať" odstráni celý kontext tak, aby sa čísla nezobrazovali jeden nad druhým. Stane sa to stlačením tlačidla "Nastaviť číslo". Syntax v tomto prípade je: context.clearRect (x, y, w, h). Tento ukážkový kód pre kreslenie vyplnený obdĺžnik plátno JavaScript pomocou fillRect, ktoré by mali odstraňovanie centrálnu časť. FillRect používa šírku a výšku plátna, a percento clearRect používa tieto hodnoty pre vytvorenie rámu. V tomto príklade sa zobrazuje iba metóda jasného jasu pre Canvas javascript. X, y, šírka a výška očisteného obdĺžnika sú uvedené v percentách. Postupnosť čistenia:
Stiahnite plátno a nakreslite čiaru.
Zavolajte clearRect ().
Zmena veľkosti manipuláciu výšku a šírku plátna a div-pixel prvky s pomerom 1: 1
Hodnotenie užívateľov
plátno poradia s integráciou mnohých predajcov tretích strán, ako je Flipgrid, Padlet a príbeh. Preto je pre dizajnéra veľmi výhodné. Spätná väzba používateľov o funkčnosti služby pre prácu s nástrojom Canvas javascript hlásená
Používa jednoduchý editor RTF, ktorý ľahko vytvára text, vkladá obrázky a videá a zlepšuje text pomocou editora HTML. To dáva návrhárovi možnosť vytvárať viac než len text na stránke.
Pracuje skvele s dodávateľmi tretích strán a integruje ich priamo do programu Canvas. Táto vlastnosť umožňuje používať ďalšie nástroje, ako sú McGraw-Hill Connect, Kaltura, Box Office 365 Disk Google a mnoho ďalších.
Plátno má kaskádový prístup k organizačnému návrhu na úrovni koreňového účtu alebo ako súčasť akéhokoľvek ďalšieho. Každý sub-dedí atribúty svojich "rodičov". Správa všetkých týchto prvkov sa stala neuveriteľne jednoduchou vďaka použitiu importu súborov .csv do systému SIS. Príručka neustále aktualizuje dokumentáciu služby.
Plátno je systém riadenia výučby, ktorý môže používať malá organizácia, ktorá ponúka len pár hodín na miestnej úrovni alebo gigantickú organizáciu, ktorá ponúka tisícky kurzov pre stovky tisíc študentov po celom svete.
Škálovateľnosť inštancie Canvas je veľmi silná. Služba je intuitívna a dobre naladená.
Poskytuje flexibilnú platformu, v ktorej môže používateľ zdieľať skúsenosti s ostatnými. Vhodné pre integráciu s mnohými užitočnými službami, ako je Disk. To je celkom výhodné, pretože môžete používať iba funkcie, ktoré potrebujete.
Integrácia so službou Gmail Drive a môže byť intuitívnejšia.
Vynikajúce služby zákazníkom. Pridané nové produkty a vylepšenia.
Plátno je veľmi flexibilné, dovoľujeduplicitné individuálne úlohy.
Canvas sa dobre integruje s Crocodocom pre on-line komentáre a hodnotenie prác, má vynikajúce importné funkcie.
Jednou z dôležitých funkcií, ktorú by chceli používatelia vidieť, je schopnosť anotovať PDF alebo iné dokumenty na webovej platforme Canvas. V súčasnosti nie sú vo webovej verzii takéto funkcie.
