Canvas značka se skládá z plátna, ale když lidé mluví o tom, odkazují na API, která obsahuje sadu funkcí pro kreslení čáry, obdélníky, kruhy, oblouky, škálování, konverze grafických prvků. Je-li plátno na webové stránce je obdélníkový prostor pro bitmapy, kde každá souřadnice je přiřazen barvu. Plátno javascript vytváří vektorových objektů ve stylu jiných médiích, jako SVG nebo Flash, ale pouze jako rastru. Ve skutečnosti můžete nahrát obrázek na plátno a manipulovat s obrazovými body jeden po druhém. Služba byla nedávno zahrnuta do HTML a staré prohlížeče nejsou podporovány. Pro ně je vhodné poskytnout alternativní obsah ve formě pevného výkresu nebo vysvětlujícího textu.
Technologie plátna vs. Flash
Canvas javascript (plátno) - standard HTML5 prvek zpracovávat moderních prohlížečích. Flash je technologická společnost, která vyžaduje instalaci plug-inu. Dnes většina prohlížečů má nainstalovaný plugin Flash, stejně jako dříve, existují ty, které nepodporují plátno. Nicméně, dynamika vývoje ukazuje, že se situace může změnit velmi rychle, protože nové platformy nebude pracovat s „Flash“. Nicméně, většina odborníků v oblasti grafiky se domnívají, že práce s Flash jednodušší a rychlejší než s látkou, protože se rozšířila grafické prostředí (Adobe Flash CS6) a proces vytváření obrázků na plátně javascript něco těžší. Situace by se měla změnit se vzhledu rámců ve stylu paper.js. Mějte však na paměti, že nováSlužba je zdarma a otevřená, takže nemusíte utrácet peníze na licenci. Flash vlastní společnost Adobe. To se vysvětluje skutečností, že dnešní složité hry se stále vytvářejí s jeho pomocí.
Pokud chcete použít grafiku ve více rozlišeních, vektorová technologie "Flash" je účinnější než rastr Canvas. Ale u většiny webových grafiky se tkanina nakládá rychleji. Flash vyžaduje spouštění více zdrojů, takže na mobilním zařízení má Canvas javascript významnou výhodu. Plátno vám umožňuje vytvářet grafiky všeho druhu, od přímých po interaktivní hry, a také umožňuje editovat obrázky, měnit tón a hranice.
Atribut atributu
Canvas je prvek HTML, který vám umožňuje dynamicky vytvářet grafiku a skriptovací animace. Jeho aplikace mají širokou škálu aplikací: hry, rozhraní, editor obrázků, dynamické efekty a 3D aplikace. Hlavní výhody služby - nevyžaduje další plug-in, pouze jeden prohlížeč, který podporuje javascript html5 Canvas: Safari, Chrome, Firefox, Opera a Internet Explorer. Chcete-li například nakreslit dva obdélníky různých barev, použijte několik funkcí rozhraní javascript API. Za prvé, prostor plátna na stránce je vyhrazen pomocí tagu HTML a nakreslíme obrazce. Umístění elementu javascript html5 Canvas se zobrazí na fotografii.
Volitelně jsou jiné, například styl, umístěny pro zadání atributů tabulky a určení jejich vzhledu. Poté zkontrolujte, zda je prohlížeč kompatibilní s Canvas, předepište kód.
Pomocí getElementById () získáte element stránky, který jePřevedeno jako parametr Canvas. Pak získají přístup k 2D kontextu plátna a provádějí tolik metod, kolik potřebuje, v kontextu kreslení animačních elementů javascriptu Canvas. Poté napište úplný kód provádění.
Obrázek obdélníku
Chcete-li nakreslit jednoduchý šedý obdélník 450 x 350 pixelů, který pokryje celé plátno, napište kód.
Šířka a výška dat určují velikost plochy. Pozice obsazená touto webovou stránkou je určena místem, kde je napsán prvek HTML. Příklady plátna javascript lze umístit uvnitř stolu nebo uvnitř plovoucího kontejneru. Pokud platforma tento styl nepodporuje, objeví se text "Váš prohlížeč nepodporuje plátno". Pak vložte značku se snímkem, který vytvoří plátno. Chcete-li se odkázat na určitou položku kódu javascript, je vhodné jí dát identifikátor, například id = miCanvas. Když je položka vytvořena, spusťte kód JS, který vytváří výkresy. To je třeba provést po vytvoření plátna. Jedním ze způsobů, jak to udělat, je použít vlastnost onload. Po načtení stránky se provede funkce drawCanvas (). První věcí je získat uzel DOM pomocí instrukcí: var canvas = document.getElementById ('miCanvas') a předat jako parametr položku elementu plátna. Pak obdrží textový kontext jazyka javascript Canvas text: var context = canvas.getContext ('2d'). Existují dva možné kontexty: 2d pro kreslení ve dvou rozměrech a webgl pro obraz ve třech rozměrech. Pomocí kontextového objektu můžete použít všechny funkce a vlastnosti, které jsou s ním spojeny.
Souřadnicový systém
Původ souřadnice je bod (00), hodnoty souřadnic X směřují doprava a souřadnice souřadnic Y klesají, na rozdíl od tradičních souřadnicových systémů. Umístění objektu se provádí vzhledem k původu, například obdélník je v poloze (9070). Plátno plátna je 450 na šířku a 350 na výšku pro linku: context.fillRect (00450 350). Bude nakreslena vyplněná postava s pravým horním rohem v bodě (00), šířkou 450 a výškou 350, tj. Bude mít celé plátno příkladu. Chcete-li nakreslit obdélník bez vyplnění, aplikujte: strokeRect (x, y, šířka, výška). Plátno nemá určité funkce pro kreslení polygonů, včetně trojúhelníků a pětiúhelníků (s výjimkou obdélníku). Metoda práce s plátnem je kreslit tvary nebo cesty. Chcete-li vytvořit tvar, nejdříve inicializujte beginPath () a potom umístěte kurzor na výchozí bod pomocí moveTo (x, y). Bude vytvořen formulář s různými možnostmi pro obraz. Linky, oblouky a křivky lze provést pomocí: zdvihu (), který kreslí otevřený nebo uzavřený tvar bez vyplnění. Pokud porovnáte poslední bod s prvním bodem, formulář bude uzavřen. Fill () vykreslí uzavřený tvar výplně. Pokud byl otevřený, funkce vytvoří přímku od posledního do počátečního bodu a dokončí ji.
Přímý nástroj ClosePath
Použijte closePath () pro vytvoření přímky od posledního do počátečního bodu.
Předchozí kód můžete provést kopírováním a vkládáním do pole a klepnutím na tlačítko "Zobrazit písemný kód".
] Zobrazte křivkyExistují tři základní metody:
arcos, oblouky.
Curvas de Bezier, křivky Bezier.
Curvas cuadr? Ticas, kvadratické křivky.
Amplituda oblouku bude od počátečního úhlu k konečnému. Měří se v radiánech. Pokud má směr otáčení skutečnou logickou hodnotu, oblouk jde proti směru hodinových ručiček. Bézierovy křivky - typ čar, které se často používají v konstrukci a vyžadují počáteční, konečný, a některé kontrolní body. Nejlepší způsob, jak vidět křivky Bézierovy - nakreslit je pomocí programů, jako je Illustrator nebo Inkscape (zdarma). Lze také použít simulátor bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y), kde cp1x, cp1y - první kontrolní bod souřadnic, cp2x, cp2y - druhý, a x a y souřadnice koncového bodu křivky. Kvadratické křivky podobné těm, předchozí, ale pouze s jedním kontrolním bodem - quadraticCurveTo (cp1x, cp1y, x, y), kde cp1x, cp1y - počáteční poloha, a x a y - konec.
Kombinace tvarů a stylů
pro přijímací funkci tvar inicializuje beginPath () umístěte kurzor (moveTo (x, y)), pro vytvoření tvaru. Chcete-li jej volitelně zavřít, použijte příkaz closePath (). Kreslení pomocí funkce fill () provádí bez vyplnění a tahu. Tento proces lze opakovat tolikrát, kolikrát je to nutné. Proces je podobný procesu při kreslení tužky na list papíru. Pokaždé, když povrch trhací mrtvice a tužka na papíře, umístit do nové polohy, plní podobnou akční moveTo (x, y). Výjimkou z obecného vzorce staví nástroj pro kreslení obdélníků (strokeRect (x, y, šířka, výška) a fillRect (x, y, šířka, výška)), kterýzačněte s moveTo (x, y) a končí bodkou nebo výplní. V tomto případě jsou všechny potřebné obrazové funkce sloučeny. Pokaždé inicializační formy plátno otevírá datovou strukturu v seznamu, který je naplněn instrukce, když je spouštěn, mrtvice () nebo fill ().
pro přijímací lineární gradienty
plátno JavaScript vytvoření funkce: createLinearGradient (x_ini, y_ini, x_fin a and_fin). Poskytuje lineární gradient pomocí čáry definované počátečním bodem (x_ini, y_ini) a konečným (x_fin, y_fin). Směr tohoto řádku ukazuje pohyb sklonu. Chcete-li například přechod ve svislém směru, vytvořte svislou čáru. Definuje první barvu. Délka udává intenzitu přechodu. Používáte-li programy jako Photoshop, operace bude stejná. Chcete-li dokončit definici přechodu, zadejte barvy, které ji provedou, pomocí funkce: addColorStop (pozice, barva). Parametr polohy určuje, na kterém místě se barva označená druhým parametrem použije. Poloha je vyjádřena číslem od nuly do jednoho. Pro vytvoření gradientu jsou potřebné alespoň dvě různé barvy. Chcete-li například začít s červenou barvou a končí bílou:
addColorStop (0 "červená");
addColorStop (1 "bílá").
pro kreslení radiálních gradientů plátno má funkci: createRadialGradient (x1 y1 r1 x2 y2 R2). Definuje radiální gradient založený na dvou kružnicích, z nichž každý má polohu středu (x, y) a poloměr (r). Je-li střed kruhů oba stejné, bude účinek stejný, zatímco v druhém případě bude vytvořen účinek koule, kterýzávisí na poloměru.
Práce s obrázky
Canvas zvládne obrázky v nejběžnějších formátech (GIF, JPEG, PNG) a má ovládací funkce - velikost a rotaci na úrovni pixelů. Tím získáte skvělé příležitosti pro zpracování obrazu pomocí látky. Můžete použít obrázky jako pozadí, kreslit miniatury, zvětšit a změnit barvy. Prvním krokem při práci s plátnem je nahrání fotografie. Existuje několik způsobů, jak to udělat. Dokud nebude plně načten, uživatel s ním nebude moci pracovat. Dva nejčastější způsoby stahování:
Objekt je uvnitř javascriptu. Pomocí nového obrázku vytvořte instanci objektu Image a poté jej přiřaďte jménu a začněte ho používat po načtení.
Obrázek webové stránky. Pomocí značky stáhněte obrázek z těla webu a přiřaďte mu identifikátor, například název, pro přístup k němu z použitého dokumentu.getElementById.
Pokud chcete, aby byl viditelný až po zpracování, použijte ve značce skrytou vlastnost. Existují i další způsoby stahování, například použití vytvořeného obrázku v jiném objektu. Lze jej také stáhnout pomocí dat metody: url. Po dokončení stahování můžete kreslit pomocí drawImage, která podporuje několik formátů: drawImage (obrázky, x, y). Nakreslete obrázek na plátně a umístěte levý horní roh do souřadnic (x, y). javascript plátno (obrázek, x, y, šířka, výška) umožňuje změnit velikost obrázku. První tři parametry mají stejný význam jako vv předchozím případě. Šířka a výška určují velikost (v pixelech), ve které bude zobrazen graf. Pokud je rozložení větší než originál, je obraz zvětšen a pokud je menší - miniaturizace. Pokud chcete, aby se obraz nedeformoval, musíte zachovat poměr šířky a výšky původního obrazu. DrawImage (obraz, x1 y1 šířka1 výška1 x2 y2 šířka2 výška2) měří část obrázku. Pomocí této funkce bude obsah barevného rámečku zobrazen na plátně a bude zahrnut jako pozadí. Tato funkce přebírá část původního obrazu definovaného jako x1 y1 (šířka 1 výška 1) a přitahuje tuto část do jiné polohy (x2 y2) a na jinou stupnici (šířka 2 výška 2). V tomto případě vytvořte zvětšení plochy, protože hodnoty šířky a výšky 2 jsou větší než 1.
Příklad použití ClearRect
ClearRect na plátně vykreslí průhledný obdélník. Na rozdíl od funkcí rect, strokeRect nebo fillRect, které zobrazují barevný tvar. Nenechte se zmást tím, že kreslíte bílý obdélník. Obrázek pozadí je nastaven na CSS, na plátně se objeví černý obdélník. Pokud je uzavřeno s bílým pozadím, bude průhledná skrytá. Místo toho je nejlepší použít funkci clearRect k tomu, aby nakreslil "čistý" obdélník Canvas javascript na webu, a tím umožnil zářivý obraz.
Plátno můžete také vyčistit nastavením šířky nebo výšky - stačí je nastavit na plátno, což mu dává novou hodnotu:
//canvas.width = 600;
canvas.width = canvas.width.
Tím se resetuje maticetransformace Plátno JavaScript clearRect vymaže všechny pixely na plátně v tomto obdélníku (x, y, w, h) na transparentní černé. Funkci clearCanvas () lze použít k jemnému vyladění výkresu a textu plátna. Tato funkce je užitečná, pokud chcete odstranit celý kontext a přidat nové kresby do prázdného rozvržení. Musí ho vyčistit pokaždé, když se pohybuje myš a nakreslí se nová čára. Po stisknutí tlačítka "Nastavit číslo" se na plátně zobrazí náhodné číslo od 1 do 100. Tlačítko "Vymazat" odstraní veškerý kontext tak, aby se čísla nezobrazovaly nad sebou. K tomu dojde, pokud znovu stisknete tlačítko "Nastavit číslo". Syntaxe v tomto případě je: context.clearRect (x, y, w, h). Toto je příklad výkresového kódu v obdélníku vyplněném javascriptem Canvas pomocí fillRect, který potřebuje vyčistit centrální část. FillRect aplikuje šířku a výšku látky, zatímco metoda clearRect používá k vytvoření rámce procentuální hodnoty z těchto hodnot. V tomto příkladu je zobrazena pouze metoda Clear Javascript Clear. X, y, šířka a výška vyčištěného obdélníku jsou uvedeny v procentech. Sekvence čištění:
Stažení plátna a kreslení čáry.
Volání clearRect ().
Změna velikosti manipulaci výšku a šířku plátna a div-pixel prvky s poměrem 1: 1
Hodnocení uživatelů
plátno poradí s integrací mnoha prodejců třetích stran, jako je Flipgrid, Padlet a děj. Proto je pro návrháře velmi výhodné. Zpětná vazba uživatelů o funkčnosti služby pro práci s nástrojem Canvas javascript byla hlášenanásledující:
Používá jednoduchý editor RTF, který snadno vytváří text, vkládá obrázky a videa a vylepšuje text pomocí editoru HTML. To dává návrháři možnost vytvářet více než jen text na stránce.
Pracuje skvěle s dodavateli třetích stran a integruje je přímo do Canvas. Tato vlastnost umožňuje používat další nástroje, jako jsou McGraw-Hill Connect, Kaltura, Box Office 365 Disk Google a mnoho dalších.
Plátno má kaskádový přístup k organizačnímu návrhu na úrovni kořenového účtu nebo jako součást dalšího. Každý sub-dědí atributy svých "rodičů". Správa všech těchto prvků se díky použití SIS importu souborů .csv stala neuvěřitelně snadnou. Instrukce neustále aktualizuje dokumentaci služby.
Plátno je systém řízení učení, který může využít malá organizace, která nabízí pouze několik hodin na místní úrovni nebo gigantická organizace, která nabízí tisíce kurzů pro stovky tisíc studentů po celém světě.
Škálovatelnost instance Canvas je velmi silná. Služba je intuitivní a dobře naladěná.
Poskytuje flexibilní platformu, kde uživatel může sdílet zkušenosti s ostatními. Vhodné pro integraci s mnoha užitečnými službami, jako je Drive. To je velmi výhodné, protože můžete používat pouze funkce, které potřebujete.
Integrace s Gmailem a může být intuitivnější.
Vynikající služby zákazníkům. Přidány nové produkty a vylepšení.
Plátno je velmi flexibilní, dovolujeduplikovat jednotlivé úkoly.
Canvas se dobře integruje s Crocodocem pro online komentář a hodnocení děl, má vynikající importní funkce.
Jednou z důležitých funkcí, které uživatelé chtějí vidět, je schopnost anotovat PDF nebo jiné dokumenty na webové platformě Canvas. V současné době neexistují žádné takové funkce ve webové verzi.
