Javascript canvas: leírás, jellemzők, példák, vélemények

A vászon A canvas címkével jön létre, de amikor erről beszélnek, az API-ra utalnak, amely tartalmaz egy sor funkciót a rajzoláshoz, vonalakhoz, téglalapokhoz, körökhöz, ívekhez, méretezéshez, grafikus elemek konvertálásához.

Weblapon lévő vászon esetén ez egy téglalap alakú terület egy bittérképes képhez, amelyben minden koordinátához színt rendelnek. A Canvas JavaScript nem hoz létre vektorobjektumokat más környezetek, például SVG vagy Flash stílusában, hanem csak bitképeket rajzként.

Valójában feltölthet egy képet a vászonra, és egyesével manipulálhatja annak pixeleit. A szolgáltatás nemrégiben bekerült a HTML-be, és a régebbi böngészők nem támogatják. Kényelmes számukra alternatív tartalmat biztosítani rögzített kép vagy magyarázó szöveg formájában.

Vászon vs Flash technológia

A Canvas JavaScript (canvas) egy szabványos HTML5 elem, amelyet a modern böngészők dolgoznak fel. A Flash olyan vállalati technológia, amely plugin telepítését igényli. Ma a legtöbb böngészőben telepítve van egy Flash plugin, így azok, amelyek nem támogatják a Canvas-t, továbbra is működnek. A fejlődés dinamikája azonban azt jelzi, hogy a helyzet hamarosan megváltozik, mivel az új platformok már nem működnek "Flash".

A legtöbb grafikus szakértő azonban úgy véli, hogy könnyebb és gyorsabb a Flash-szel dolgozni, mint a canvas-szal, mivel fejlett grafikai tervezési környezettel rendelkezik (Adobe Flash CS6), és a Canvas JavaScript grafika létrehozásának folyamata valamivel nehezebb. A helyzetnek meg kell változnia a papír stílusú keretek megjelenésével.js. Meg kell azonban jegyezni, hogy az új szolgáltatás ingyenes és nyitott, ezért nem kell pénzt költenie egy licencre. A Flash az Adobe tulajdonában van. Ez magyarázza azt a tényt, hogy ma is komplex játékokat hoznak létre a segítségével.

Ha több felbontású grafikát kell használnia, vektor technológia "Flash" hatékonyabb, mint a raszteres vászon. De a legtöbb webes grafika esetében a vászon gyorsabban töltődik be. A Flash futtatásához több erőforrás szükséges, így a Canvas JavaScript jelentős előnnyel rendelkezik a mobil eszközökön. A vászon lehetővé teszi, hogy mindenféle grafikát készítsen, egyenes vonaltól az interaktív játékokig, valamint lehetővé teszi a képek szerkesztését, a hang és a határok megváltoztatását.

Attribútumazonosító

A Canvas egy HTML elem, amely lehetővé teszi grafikus és animációs szkriptek dinamikus létrehozását. Alkalmazásai széles körű alkalmazásokkal rendelkeznek: játékok, interfészek, grafikus szerkesztők, dinamikus effektusok és 3D alkalmazások.

A fő előnye a szolgáltatás, hogy nem igényel további plugin, csak egy böngésző, amely támogatja a JavaScript html5 Canvas: Safari, Chrome, Firefox, Opera, Internet Explorer.

Például két különböző színű téglalap rajzolásához használjon több API-funkciót JavaScript segítségével. Először foglalja le az oldal vászonterületét a HTML címke segítségével, majd rajzolja meg az alakzatokat. A JavaScript html5 Canvas elem elhelyezése a képen látható.

Ha szükséges, helyezzen el másokat, például egy stílust a táblák attribútumainak megadásához, valamint megjelenésük meghatározásához.

Ezután ellenőrzik a böngésző kompatibilitását a Canvas-szal, előírják a kódot.

getElementById () használják, hogy egy oldal elem, amely át a vászon paraméter. Ezután hozzáférnek a vászon 2D kontextusához, és annyi módszert hajtanak végre, amennyire szükség van a vászon JavaScript animációs elemeinek rajzolásához.

Ezután a teljes végrehajtási kódot írják elő.

Téglalap Kép

Egy egyszerű, 450 x 350 képpontos szürke téglalap rajzolásához, amely az egész vásznat foglalja el, írja elő a kódot.

A szélesség és magasság adatok határozzák meg a felület méretét. Azt a pozíciót, amelyet ez a vászon az interneten belül foglal el, a HTML elem írásának helye határozza meg. JavaScript vászon példák, elhelyezhető egy asztal belsejében vagy egy úszó tartályban.

Ha a platform nem támogatja a stílust, megjelenik a "böngészője nem támogatja a vásznat" szöveg. Ezután tegye a címkét a vászonot létrehozó rajz rögzítésével. Ahhoz, hogy a Javascript-kód egy adott elemére hivatkozhasson, célszerű megadni egy azonosítót, például id = miCanvas.

Amikor egy elem jön létre, js kód kerül végrehajtásra, amely rajzokat készít. Ezt a vászon létrehozása után kell megtenni. Az egyik végrehajtási módszer az onLoad tulajdonság használata. Amint az oldal betöltődik, a drawCanvas() függvény végrehajtásra kerül.

Az első, dolog, hogy a do az, hogy megkapja a DOM csomópontot az utasítások segítségével: var canvas = document.getElementById (`miCanvas`), és adja át a canvas elem azonosítóját paraméterként. Ezután kapnak egy JavaScript Canvas text context objektumot:var context = canvas.getContext (`2D`).

Két lehetséges kontextus létezik: 2d két dimenzióban történő rajzoláshoz, webgl pedig három dimenzióban lévő képhez. Ha van egy kontextusobjektum, akkor az összes hozzá tartozó funkciót és tulajdonságot alkalmazhatja.

Koordináta-rendszer

A koordináták eredete a (0,0) pont, az X koordináta értékei jobbra, az Y koordináta értékei pedig lefelé mennek, ellentétben a hagyományos koordinátarendszerekkel. Az objektum az eredethez képest helyezkedik el, például a téglalap a (90,70)pozícióban található. A vászon vászon mérete 450 széles és 350 magas a sorban: kontextus.kitöltés (0, 0, 450, 350). A kitöltött ábrát a jobb felső sarokban (0,0), a 450 szélességben és a 350 magasságban húzzuk meg, vagyis a példa teljes vászonját elfoglalja. Téglalap rajzolásához töltés nélkül használja: strokeRect (x, y, szélesség, magasság).

A vászon nem rendelkezik speciális funkciókkal sokszögek, köztük háromszögek és ötszögek rajzolására (kivéve a téglalapot). A vászonnal való munka módja az alakzatok vagy utak rajzolása. Űrlap létrehozásához először inicializálja a beginPath () függvényt, majd vigye a kurzort a kezdőpontra a moveTo (x, y)használatával. Lesz egy űrlap, amely a kép különböző lehetőségeivel jön létre.

A vonalak, ívek és görbék a következő módon hajthatók végre: stroke (), amely nyitott vagy zárt alakot rajzol kitöltés nélkül. Ha az utolsó pontot az elsővel illeszti, az űrlap bezáródik. Fill() rajzol egy zárt alakú kitöltés. Ha kinyitotta, a függvény egyenes vonalat hoz létre az utolsótól a kiindulási pontig annak befejezéséhez.

closePath egyenes vonal létrehozása eszköz

A closePath () függvény segítségével hozzon létre egy egyenes vonalat az utolsótól a kiindulási pontig.

Az előző kódot úgy hajthatja végre, hogy másolja és beilleszti a mezőbe, majd kattintson az "írott kód megjelenítése"gombra.

A görbék rajzolásának három fő módja van:

• Arcos, arcs.
• Curvas de Bezier, Bezier curves.
• Curvas cuadr argenticas, másodfokú görbék.

Az ív amplitúdója a kezdeti szögből a végsőbe megy. Radiánban mérik őket. Ha a forgásirány paraméter valódi logikai értékkel rendelkezik, az ív az óramutató járásával ellentétes irányba megy.

Bezier - a görbék egy Típus vonalak, ezek nagyon gyakran használják a tervezésben, és kezdő, befejező, valamint néhány ellenőrzési pontot igényelnek. A Bezier-görbék megismerésének legjobb módja az, ha olyan programokkal rajzolja meg őket, mint az Illustrator vagy az Inkscape (ingyenes). Használhatja a bezierCurveTo szimulátort is (cp1x, cp1y, cp2x, cp2y, x, y), ahol a cp1x, cp1y az első vezérlőpont koordinátái, cp2x, cp2y a második, x és y pedig a görbe végpontjának koordinátái.

A másodfokú görbék hasonlóak az előzőekhez, de csak egy vezérlési pontjuk van-quadraticCurveTo (cp1x, cp1y, x, y), ahol a cp1x, cp1y az elsődleges koordináták, x és y pedig a végkoordináták.

Formák és stílusok kombinációja

Alakzatok rajzolásához inicializálja a beginPath () függvényt, vigye a kurzort(moveTo (x, y)) alakzatok létrehozásához. Opcionálisan zárja be, closePath () használják. . A fill () rajzolás töltés és löket nélkül történik. Ezt a folyamatot annyiszor meg lehet ismételni, amennyire szükséges. A folyamat hasonló a ceruzával történő rajzoláshoz egy darab papírra. Minden alkalommal, amikor a stroke befejeződött, és a ceruzát letépik a papírról, hogy új helyzetbe helyezze, a moveTo (x, y) hasonló műveleteket hajt végre.

Az általános építési képlet alól kivételt képeznek a téglalapok (strokeRect (x, y, width, height) és fillRect (x, y, width, height)) rajzolásának funkciói, amelyek moveTo (x, y) - vel kezdődnek, és lökettel vagy kitöltéssel végződnek. Ebben az esetben egyesítik az összes szükséges képfunkciót. Az űrlap inicializálásakor a Canvas megnyitja az adatstruktúrát egy lista formájában, amely egy utasítással van kitöltve, amikor a stroke () vagy a fill().

Lineáris gradiensek rajzolása történik

Canvas JavaScript create funkciója: createLinearGradient (x_ini, y_ini, x_fin és and_fin). Lineáris gradienst ad a kiindulási pont (x_ini, y_ini) és a végpont (x_fin, y_fin)által meghatározott vonal használatával. Ennek az egyenes vonalnak az iránya mutatja a gradiens mozgását. Ha például azt szeretné, hogy a színátmenet függőleges irányba haladjon, hozzon létre egy függőleges vonalat. Meghatározza az első színét. A hossz jelzi a gradiens intenzitását. Ha olyan programokat használ, mint a Photoshop, a művelet hasonló lesz. A színátmenet meghatározásának befejezéséhez adja meg az azt alkotó színeket a következő funkcióval: addColorStop (pozíció ,szín).

A pozíció paraméter határozza meg, hogy a második paraméter által megadott szín honnan kerül alkalmazásra. A pozíciót nullától egyig terjedő számként fejezzük ki. Legalább két különböző szín szükség van gradiens létrehozása. Például, ha azt szeretné, hogy pirossal kezdődjön, és fehérrel végződjön:

• addColorStop (0, "piros");
• addColorStop (1, "Fehér").

Rajz radiális színátmenetek vászon funkciója: createRadialGradient (x1, y1, r1, x2, y2, r2).

Radiális gradienst határoz meg két kör alapján, mindegyik középpontjának (x, y) és sugarának (r)helyzetével. Ha mindkét kör középpontja megegyezik, akkor a hatás egyenletes lesz, míg a másik esetben gömbhatás jön létre, a sugár függvényében.

Képek használata

A vászon képes dolgozni a a leggyakoribb formátumok (GIF, JPEG, PNG) és vezérlő funkciók-méret és forgatás a pixel szinten. Ez nagyszerű lehetőségeket kínál a rajzok vászonnal történő feldolgozására. A képet háttérként alkalmazhatja, vázlatokat készíthet, nagyíthat változtassa meg a színt.

A vászonnal való munka első lépése egy fénykép feltöltése. Vannak többféle módon ehhez. Amíg teljesen be nem töltődik, a felhasználó nem tud vele dolgozni. A Letöltés két leggyakoribb módja:

1. Egy objektum a Javascript belsejében. Új kép használatával hozzon létre egy példányt a Képobjektumból, majd rendeljen hozzá egy nevet, majd a betöltés után kezdje el használni.
2. Weboldal kép. Egy címke használatával betöltenek egy rajzot a webhely testéből, és hozzárendelnek egy azonosítót, például egy nevet, hogy hozzáférjenek a használt dokumentumból.getElementById.

Ha azt szeretné, hogy csak a feldolgozás után legyen látható, Használja a címke rejtett tulajdonságát. A feltöltésnek más módjai is vannak, például a létrehozott rajz használatához egy másik objektumban. A data: url módszerrel is betölthető. A letöltés befejezése után rajzolhat a drawImage segítségével, amely több formátumot támogat: drawImage (kép, x, y). Rajzoljon egy képet a vászonra úgy, hogy a bal felső sarkot a koordinátákba helyezi (x, y).

JavaScript Canvas drawimage (kép, x, y, szélesség, magasság) lehetővé teszi a rajz méretezését. Az első három paraméternek ugyanaz az értéke, mint az előző esetben. A szélesség és a magasság határozza meg azt a méretet (pixelben), amelyben a grafikon megjelenik. Ha az elrendezés Nagyobb, mint az eredeti, a kép nagyításra kerül, ha kisebb, akkor miniatürizálódik. Ha szükséges, hogy a kép ne deformálódjon, meg kell őrizni az eredeti kép szélességének és magasságának arányát.

rajzkép (kép, x1, y1, szélesség1, magasság1, x2, y2, szélesség2, magasság2) a rajz egy részét méretezi. Ezzel a funkcióval csak a színkeret tartalma jelenik meg a vásznon, háttérként szerepelt. Ez a funkció az eredeti kép x1, y1 (Szélesség 1, Magasság 1) egy részét veszi fel, és ezt a részt egy másik pozícióba (x2, y2) és egy másik méretarányba (Szélesség 2, Magasság 2)rajzolja. Ebben az esetben a terület növekedése jön létre, mert a szélesség és a magasság 2 értékei nagyobbak, mint 1.

Példa a clearRect használatára

a clearRect átlátszó téglalapot rajzol a vászonra. A rect, strokeRect vagy fillRect funkcióktól eltérően, amelyek színes alakot ábrázolnak. Ezt nem szabad összekeverni egy fehér téglalap rajzolásával.

A háttérképet CSS állítja be, egy fekete téglalap jelenik meg a vászonon. Ha fehér háttérrel zárja be, az átlátszó el lesz rejtve. Ehelyett jobb, ha a clearRect függvényt használja egy "tiszta" téglalap JavaScript vászonjának rajzolására a vászonra, ezáltal lehetővé téve a rajzok ragyogását.

A vásznat a szélesség vagy a magasság beállításával is megtisztíthatja - csak állítsa be őket a vászonra, új értéket rendelve hozzá:

• // vászon.szélesség = 600;
• vászon.width = vászon.szélesség.

Ez visszaállítja a transzformációs mátrixot.

Canvas JavaScript clearrect törli az összes pixel a vásznon egy adott téglalap (x, y, w, h) átlátszó fekete. A ClearCanvas () függvény a rajz és a vászon szövegének pontos tisztítására használható. Ez a funkció akkor hasznos, ha törölnie kell a teljes kontextust, hogy új rajzokat adjon egy üres elrendezéshez. Azt, hogy törölje minden alkalommal, amikor az egér mozog, és egy új vonalat húzunk.

A" szám beállítása " gomb megnyomásakor 1-től 100-ig terjedő véletlen szám jelenik meg a vászonon. A "Törlés" gomb mindent eltávolít a kontextusból, hogy ne jelenítse meg a számokat egymás felett. Ez akkor történik meg, ha ismét rákattint a "szám beállítása" gombra.

A szintaxis ebben az esetben: kontextus.clearRect(x, y, w, h).

Ez egy példa egy kitöltött téglalap rajzolására egy JavaScript vászonra a fillRect használatával, amelynek törölnie kell a központi részt. a fillRect a vászon szélességét és magasságát alkalmazza, a clearRect pedig ezen értékek százalékait használja keret létrehozásához. Ez a példa csak a Canvas JavaScript clear metódust mutatja. X, y, a kitisztított téglalap szélessége és magassága százalékban jelenik meg.

Tisztítási sorrend:

• Töltsön be egy vásznat és rajzoljon rá vonalakat.
• Call clearRect().
• átméretezés a vászon és a div elemek szélességének és magasságának manipulálásával 1:1 képpontaránnyal.

Felhasználói Vélemények

A Canvas nagyszerű munkát végez számos harmadik féltől származó gyártó integrálásával, mint például a Flipgrid, a Padlet és a Storyline. Ezért nagyon kényelmes a tervező számára.

Az áttekintésekben a felhasználók a következőket jelentik a szolgáltatás funkcionalitásáról munkavégzéshez a Canvas JavaScript használatával:

• Egyszerű Rich Text szerkesztőt használ, amely megkönnyíti a szöveg létrehozását, képek és videók beillesztését, a szöveg javítását HTML-szerkesztővel. Ez lehetővé teszi a tervező számára, hogy nem csak szöveget hozzon létre egy oldalon.
• Nagyszerűen működik harmadik féltől származó gyártókkal, integrálva őket közvetlenül a vászonba. Ez a tulajdonság lehetővé teszi további eszközök használatát, mint például a McGraw-Hill Connect, a Kaltura, a Box, Az Office 365, a Google Drive és még sokan mások.
• A Canvas lépcsőzetes megközelítést alkalmaz a szervezeti tervezésben a root fiók szintjén vagy bármely további. Minden alszámla örökli a saját attribútumait "szülők". Mindezen elemek kezelése hihetetlenül egyszerűvé vált a SIS-import használatának köszönhetően .CSV fájlok. Az utasítás folyamatosan frissíti a szolgáltatási dokumentációt.
• A vászon learning management system, amelyet egy kis szervezet használhat, amely csak néhány órát kínál helyben, vagy egy óriási szervezet, amely ezreket kínál tanfolyamok több százezer diák szerte a világon.
• A Canvas példány skálázhatósága nagyon erős. A szolgáltatás intuitív és nagymértékben testreszabható.
• Rugalmas platformot biztosít, ahol a felhasználó megoszthatja tapasztalatait másokkal. Számos hasznos szolgáltatással, például a Drive-val való integrációra alkalmas. Ez nagyon kényelmes, mivel csak azokat a funkciókat használhatja, amelyekre szükség van.
• A Drive és a Gmail integrációja intuitívabb lehet.
• A Canvas kiváló ügyfélszolgálattal rendelkezik. Hozzáadott új termékek és fejlesztések.
• A vászon nagyon rugalmas, lehetővé teszi az egyes feladatok másolását.
• A Canvas jól illeszkedik a Crocodoc-hoz az online kommentáláshoz és a munkák értékeléséhez, kiváló importfunkciókkal rendelkezik.

Az egyik fontos funkció, amelyet a felhasználók szeretnének látni, a PDF fájlok vagy más dokumentumok jegyzetelése a Canvas webes platformon. Jelenleg nincs ilyen funkció a webes verzióban.