Javascript canvas: popis, funkcie, príklady, recenzie

Plátno je vytvorené pomocou značky canvas, ale keď o tom hovoria, odkazujú na API, ktoré obsahuje sadu funkcií na kreslenie, čiary, obdĺžniky, kruhy, oblúky, škálovanie, konverziu grafických prvkov.

V prípade plátna na webovej stránke ide o obdĺžnikovú oblasť pre bitmapový obrázok, v ktorej je každej súradnici priradená farba. Canvas JavaScript nevytvára vektorové objekty v štýle iných médií, ako sú SVG alebo Flash, ale iba bitmapy ako výkres.

V skutočnosti môžete nahrať obrázok na plátno a manipulovať s jeho pixelmi jeden po druhom. Služba bola nedávno zahrnutá v HTML a nie je podporovaná staršími prehliadačmi. Je pre nich vhodné poskytnúť alternatívny obsah vo forme pevného obrázka alebo vysvetľujúceho textu.

Technológia Canvas vs Flash

Canvas JavaScript (canvas) je štandardný prvok HTML5 spracovaný modernými prehliadačmi. Flash je firemná technológia, ktorá vyžaduje inštaláciu doplnku. Dnes má väčšina prehliadačov nainštalovaný doplnok Flash, takže tie, ktoré nepodporujú Canvas, stále fungujú. Dynamika vývoja však naznačuje, že situácia sa veľmi skoro zmení, pretože s novými platformami už nebude fungovať "Flash".

Väčšina grafických odborníkov sa však domnieva, že je jednoduchšie a rýchlejšie pracovať s Flash ako s canvas, pretože má pokročilé prostredie grafického dizajnu (Adobe Flash CS6) a proces vytvárania grafiky Canvas JavaScript je o niečo ťažší. Situácia by sa mala zmeniť s príchodom rámcov v papierovom štýle.js. Treba však poznamenať, že nová služba je bezplatná a otvorená, takže nemusíte míňať peniaze na licenciu. Flash je vo vlastníctve spoločnosti Adobe. To vysvetľuje skutočnosť, že dnes sa s jeho pomocou stále vytvárajú zložité hry.

Ak potrebujete použiť grafiku vo viacerých rozlíšeniach, vektorová technológia "Flash" je efektívnejšie ako rastrové plátno. Ale pre väčšinu webovej grafiky sa plátno načíta rýchlejšie. Flash vyžaduje viac zdrojov na spustenie, takže Canvas JavaScript má významnú výhodu na mobilných zariadeniach. Canvas vám umožňuje vytvárať grafiku všetkého druhu, od priamky po interaktívne hry, a tiež vám umožňuje upravovať obrázky, meniť tón a okraje.

ID atribútu

Canvas je prvok HTML, ktorý vám umožňuje dynamicky vytvárať grafické a animačné skripty. Jeho aplikácie majú širokú škálu aplikácií: hry, rozhrania, grafické editory, dynamické efekty a 3D aplikácie.

Hlavnými výhodami služby sú, že nevyžaduje žiadny ďalší doplnok, iba jeden prehliadač, ktorý podporuje JavaScript html5 Canvas: Safari, Chrome, Firefox, Opera a Internet Explorer.

Napríklad na nakreslenie dvoch obdĺžnikov rôznych farieb použite niekoľko funkcií API s JavaScriptom. Najskôr si vyhradte miesto na plátne na stránke pomocou štítku HTML a potom nakreslite tvary. Umiestnenie prvku JavaScript html5 Canvas je zobrazené na fotografii.

Ak je to potrebné, umiestnite ďalšie, napríklad štýl, aby ste určili atribúty tabuliek a určili ich vzhľad.

Ďalej skontrolujú kompatibilitu prehliadača s Canvas, predpíšu kód.

getElementById () sa používa na získanie prvku stránky, ktorý sa odovzdáva ako parameter plátna. Potom sa dostanú do 2D kontextu plátna a vykonajú toľko metód, koľko je potrebné v kontexte kreslenia prvkov animácie JavaScript na plátne.

Ďalej je predpísaný úplný kód vykonávania.

Obdĺžnikový Obrázok

Ak chcete nakresliť jednoduchý šedý obdĺžnik 450 x 350 pixelov, ktorý zaberá celé plátno, predpíšte kód.

Údaje o šírke a výške určujú veľkosť povrchu. Pozícia, ktorú toto plátno zaujíma vo vnútri webu, bude určená miestom, kde je napísaný prvok HTML. Príklady plátna JavaScript, môžu byť umiestnené vo vnútri stola alebo vo vnútri plávajúceho kontajnera.

Ak platforma nepodporuje štýl, zobrazí sa text " váš prehliadač nepodporuje plátno. Potom vložte značku so zachytením výkresu, ktorý vytvára plátno. Aby ste mohli odkazovať na konkrétny prvok v kóde Javascript, je vhodné mu dať identifikátor, napríklad id = miCanvas.

Po vytvorení prvku sa vykoná kód JS, ktorý vytvára výkresy. Toto by sa malo vykonať po vytvorení plátna. Jednou z metód vykonávania je použitie vlastnosti onLoad. Po načítaní stránky sa vykoná funkcia drawCanvas() .

Prvý, vec na urobiť je získať uzol DOM pomocou pokynov: var canvas = document.getElementById (`miCanvas`) a odovzdajte ID prvku plátna ako parameter. Ďalej dostanú objekt textového kontextu JavaScript Canvas: var context = canvas.getContext (`2d`).

Existujú dva možné kontexty: 2D pre kreslenie v dvoch rozmeroch a webgl pre obrázok v troch rozmeroch. S kontextovým objektom môžete použiť všetky funkcie a vlastnosti, ktoré sú s ním spojené.

Súradnicový systém

Počiatok súradníc je bod (0,0), hodnoty súradnice X idú doprava a hodnoty súradnice Y klesajú, na rozdiel od tradičných súradnicových systémov. Objekt je umiestnený vzhľadom na pôvod, napríklad obdĺžnik je v polohe (90,70). Veľkosť plátna plátna je 450 na šírku a 350 na výšku pre riadok: kontext.fillRect (0, 0, 450, 350). Vyplnený obrázok bude nakreslený v pravom hornom rohu v bode (0,0), šírke 450 a výške 350, to znamená, že bude zaberať celé plátno príkladu. Ak chcete nakresliť obdĺžnik bez výplne, použite: strokeRect (x, y, šírka, výška).

Plátno nemá špecifické funkcie na kreslenie mnohouholníkov vrátane trojuholníkov a päťuholníkov (okrem obdĺžnika). Spôsob práce s plátnom je kreslenie tvarov alebo ciest. Ak chcete vytvoriť formulár, najprv inicializujte beginPath () a potom umiestnite kurzor na počiatočný bod pomocou moveTo (x, y). Vytvorí sa formulár s rôznymi možnosťami pre obrázok.

Čiary, oblúky a krivky je možné vykonať pomocou: zdvih (), ktorý kreslí otvorený alebo uzavretý tvar bez výplne. Ak porovnáte posledný bod s prvým, formulár sa uzavrie. Fill() nakreslí uzavretý tvar s výplňou. Ak bola otvorená, funkcia vytvorí priamku od posledného k východiskovému bodu, aby ju dokončila.

Closepath Straight Line Creation Tool

Použite closePath() na vytvorenie priamky od posledného po počiatočný bod.

Predchádzajúci kód môžete vykonať skopírovaním a vložením do poľa a potom kliknutím na "Zobraziť napísaný kód".

Existujú tri hlavné metódy kreslenia kriviek:

• Arcos, arcs.
• Curvas de Bezier, Bezierove krivky.
• Curvas cuadráticas, kvadratické krivky.

Amplitúda oblúka pôjde od počiatočného uhla k konečnému. Merajú sa v radiánoch. Ak má parameter smeru otáčania skutočnú logickú hodnotu, oblúk pôjde proti smeru hodinových ručičiek.

Bézierov - krivky sú typom z riadkov, to sú veľmi často sa používa v dizajne a vyžaduje začiatok, koniec, ako aj niektoré kontrolné body. Najlepším spôsobom, ako sa zoznámiť s Bézierovými krivkami, je nakresliť ich pomocou programov ako Illustrator alebo Inkscape (zadarmo). Môžete tiež použiť simulátor beziercurveto (cp1x, cp1y, cp2x, cp2y, x, y), kde cp1x, cp1y sú súradnice prvého kontrolného bodu, cp2x, cp2y sú druhé a x a y sú súradnice koncového bodu krivky.

Kvadratické krivky sú podobné predchádzajúcim, ale majú iba jeden kontrolný bod-quadraticCurveTo (cp1x, cp1y, x, y), kde cp1x, cp1y sú primárne súradnice a x a y sú koncové súradnice.

Kombinácia tvarov a štýlov

Ak chcete kresliť tvary, inicializujte funkciu beginPath (), umiestnite kurzor (moveTo (x, y)) na vytvorenie tvarov. Na jeho voliteľné zatvorenie sa používa closePath () . . Kreslenie s výplňou () sa vykonáva bez plnenia a zdvihu. Tento proces sa môže opakovať toľkokrát, koľkokrát je to potrebné. Proces je podobný kresleniu ceruzkou na kúsok papiera. Zakaždým, keď dokončia ťah a odtrhnú ceruzku z papiera, aby ju umiestnili do novej polohy, moveTo (x, y) vykoná podobné akcie.

Výnimkou zo všeobecného konštrukčného vzorca sú funkcie na kreslenie obdĺžnikov (strokeRect (x, y, šírka, výška) a fillRect (x, y, šírka, výška)), ktoré začínajú moveTo (x, y) a končia ťahom alebo výplňou. V tomto prípade kombinujú všetky potrebné obrazové funkcie. Zakaždým, keď je formulár inicializovaný, Canvas otvorí dátovú štruktúru vo forme zoznamu, ktorý je vyplnený inštrukciou pri zdvihu() alebo výplni ().

Vykonáva sa 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 počiatočným bodom (x_ini, y_ini) a koncovým bodom (x_fin, y_fin). Smer tejto priamky ukazuje pohyb gradientu. Ak napríklad chcete, aby prechod smeroval vo vertikálnom smere, vytvorte zvislú čiaru. Určuje svoju prvú farbu. Dĺžka označuje intenzitu gradientu. Ak sa použijú programy ako Photoshop, operácia bude podobná. Ak chcete dokončiť definovanie prechodu, zadajte farby, ktoré ho tvoria, pomocou funkcie: addColorStop (pozícia, farba).

Parameter polohy určuje, odkiaľ sa použije farba špecifikovaná druhým parametrom. Pozícia je vyjadrená ako číslo od nuly do jednej. Minimálne dve rôzne farby sú potrebné na vytvorte gradient. Napríklad, ak chcete, aby začínal červenou farbou a končil bielou farbou:

• pridaťcolorstop (0, "červená");
• addColorStop (1, "Biela").

Pre kreslenie radiálne prechody plátno má funkciu: createRadialGradient (x1, y1, r1, x2, y2, r2).

Definuje radiálny gradient založený na dvoch kruhoch, z ktorých každý má polohu svojho stredu (x, y) a polomeru (r). Ak je Stred oboch kruhov rovnaký, efekt bude rovnomerný, zatiaľ čo v druhom prípade sa vytvorí efekt gule v závislosti od polomeru.

Práca s obrázkami

Canvas môže pracovať s obrázkami v najčastejšie otázky formáty (GIF, JPEG, PNG) a má riadiace funkcie-veľkosť a rotácia na úrovni pixelov. To dáva veľké príležitosti na spracovanie výkresov pomocou plátna. Obrázok môžete použiť ako pozadie, vytvárať náčrty, zväčšovať a zmeniť farbu.

Prvým krokom práce s plátnom je odovzdanie fotografie. Existujú niekoľko spôsobov urobiť. Kým sa úplne nenačíta, používateľ s ním nebude môcť pracovať. Dva najbežnejšie spôsoby sťahovania:

1. Objekt vo vnútri JavaScriptu. Pomocou nového obrázka vytvorte inštanciu objektu obrázka, potom mu priraďte názov a po načítaní ho začnite používať.
2. Obrázok webovej stránky. Pomocou značky načítajú výkres z tela lokality a priradia mu identifikátor, napríklad názov, aby k nemu mali prístup z použitého dokumentu.getElementById.

Ak chcete, aby bola viditeľná až po spracovaní, použite vlastnosť skrytá v značke. Existujú aj iné spôsoby, ako nahrať, napríklad použiť vytvorený výkres v inom objekte. Môže sa tiež načítať pomocou metódy data: url. Po dokončení sťahovania môžete kresliť pomocou drawImage, ktorý podporuje niekoľko formátov: drawImage (obrázok, x, y). Nakreslite obrázok na plátno umiestnením ľavého horného rohu do súradníc (x, y).

JavaScript Canvas drawimage (obrázok, x, y, šírka, výška) umožňuje zmenšiť kresbu. Prvé tri parametre majú rovnakú hodnotu ako v predchádzajúcom prípade. Šírka a výška určujú veľkosť (v pixeloch), v ktorej sa graf zobrazí. Ak je rozloženie väčšie ako pôvodné, obrázok sa zväčší a ak je menší, miniaturizuje sa. Ak je potrebné, aby sa obraz nedeformoval, je potrebné zachovať pomer šírky a výšky pôvodného obrázka.

drawImage (obrázok, x1, y1, width1, height1, x2, y2, width2, height2) mierka časť výkresu. S touto funkciou sa na plátne zobrazí iba obsah farebného rámu, ktorý bol zahrnutý ako pozadie. Táto funkcia preberá časť zdrojového obrazu definovaného ako x1, y1 (šírka 1, výška 1) a kreslí túto časť v inej polohe (x2, y2) a v inej mierke (šírka 2, výška 2). V tomto prípade sa vytvorí zväčšenie plochy, pretože hodnoty šírky a výšky 2 sú väčšie ako 1.

Príklad použitia clearRect

clearRect nakreslí na plátno priehľadný obdĺžnik. Na rozdiel od funkcií rect, strokeRect alebo fillRect, ktoré zobrazujú farebnú postavu. Toto by sa nemalo zamieňať s nakreslením bieleho obdĺžnika.

Obrázok na pozadí je nastavený pomocou CSS, na plátne sa zobrazí čierny obdĺžnik. Ak ho zatvoríte na bielom pozadí, priehľadný bude skrytý. Namiesto toho je lepšie použiť funkciu clearRect na nakreslenie plátna JavaScript "čistého" obdĺžnika cez plátno, čo umožní, aby kresby presvitali.

Plátno môžete vyčistiť aj nastavením šírky alebo výšky - stačí ich nastaviť na plátno a priradiť mu novú hodnotu:

• // plátno.šírka = 600;
• plátno.šírka = plátno.šírka.

Týmto sa resetuje transformačná matica.

Canvas JavaScript clearrect vymaže všetky pixely na plátne v danom obdĺžniku (x, y, w, h) na priehľadnú čiernu. Funkciu ClearCanvas () je možné použiť na presné vyčistenie výkresu a textu na plátne. Táto funkcia je užitočná, keď potrebujete odstrániť celý kontext a pridať nové kresby do prázdneho rozloženia. Musí to vyčistiť zakaždým, keď sa myš pohne a nakreslí sa nová čiara.

Po stlačení tlačidla "nastaviť číslo" sa na plátne zobrazí náhodné číslo od 1 do 100. Tlačidlo "Vymazať" odstráni všetko z kontextu, aby sa nezobrazovali čísla nad sebou. To sa stane, ak znova kliknete na tlačidlo "Nastaviť číslo.

Syntax v tomto prípade je: kontext.clearRect(x, y, w, h).

Toto je príklad kódu na kreslenie vyplneného obdĺžnika na plátne JavaScript pomocou fillRect, ktorý musí vyčistiť centrálnu časť. fillRect použije šírku a výšku plátna a clearRect použije percentá týchto hodnôt na vytvorenie rámca. Tento príklad zobrazuje iba metódu canvas JavaScript clear. X, y, šírka a výška vyčisteného obdĺžnika sú uvedené v percentách.

Postupnosť čistenia:

• Vložte plátno a nakreslite naň čiary.
• Volať clearRect().
• zmena veľkosti manipuláciou so šírkou a výškou plátna a prvkov div s pomerom pixelov 1: 1.

Užívateľské Recenzie

Canvas odvádza vynikajúcu prácu pri integrácii mnohých dodávateľov tretích strán, ako sú Flipgrid, Padlet a dej. Preto je veľmi výhodné pre projektanta.

V recenziách používatelia hlásia nasledujúce informácie o funkčnosti služby pre prácu s Canvas JavaScript:

• Používa jednoduchý editor RTF, ktorý uľahčuje vytváranie textu, vkladanie obrázkov a videí, vylepšovanie textu pomocou editora HTML. To dáva návrhárovi možnosť vytvárať na stránke viac ako len text.
• Funguje skvele s dodávateľmi tretích strán a integruje ich priamo do Canvas. Táto vlastnosť vám umožňuje používať ďalšie nástroje, ako sú McGraw-Hill Connect, Kaltura, Box, Office 365, Disk Google a mnoho ďalších.
• Canvas má kaskádový prístup k organizačnému dizajnu na úrovni koreňového účtu alebo v rámci akýchkoľvek ďalších. Každý podúčet zdedí atribúty svojho "rodič". Riadenie všetkých týchto prvkov sa stalo neuveriteľne jednoduchým vďaka použitiu SIS-importu .súborov csv. Pokyny neustále aktualizujú servisnú dokumentáciu.
• Plátno je systém riadenia vzdelávania, ktoré môže použiť malá organizácia ponúkajúca len pár lekcií na miestnej úrovni alebo obrovská organizácia ponúkajúca tisíce kurzy pre študentov stovky tisíc študentov po celom svete.
• Škálovateľnosť inštancie plátna je veľmi silná. Služba je intuitívna a vysoko prispôsobiteľná.
• Poskytuje flexibilnú platformu, kde 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 pohon. To je celkom pohodlné, pretože môžete používať iba tie funkcie, ktoré sú potrebné.
• Integrácia s Diskom a Gmailom môže byť intuitívnejšia.
• Canvas má vynikajúce služby zákazníkom. Pridané nové produkty a vylepšenia.
• Plátno je veľmi flexibilné, umožňuje duplikovať jednotlivé úlohy.
• Canvas sa dobre integruje s Crocodoc pre online komentovanie a hodnotenie prác, má vynikajúce importné funkcie.

Jednou z dôležitých funkcií, ktoré by používatelia chceli vidieť, je možnosť komentovať súbory PDF alebo iné dokumenty na webovej platforme Canvas. V súčasnosti vo webovej verzii takáto funkcia neexistuje.