Vissza

Canvas rajzvászon témakörök.



Óra, wekker, megjelenítése canvas területen.
Pontos időt, a számítógépünkön beállított idő
határozza meg.


Canvas alapismeretek.


  1. Canvas segéd, px felosztású háttérképpel. -------- cx_segedracs.html

  2. Egyenesvonalú alakzatok. Vonal, derékszög, háromszög tetszőleges szögek, és törlés.
    • fillRect() -- Teli négyszöget rajzol.
    • strokeRect() -- Kontúrvonalas négyszöget rajzol.
    • clearRect() -- Törli a kijelölt területet. ( Négyszög radír.)
    • beginPath() -- Rajz kezdete.
    • closePath() -- Rajz vége.
    • fill() -- Kitölti a megrajzolt formát.
    • fillStyle -- Meghatározza a kitöltési stílust
    • moveTo (y, x) -- Ceruzát a megadott (y-left,x-top) kezdőpontba mozgatja.
    • lineTo (y, x) -- Meghatározza következő (y-left,x-top) végpontot.
    • stroke () -- Összeköti a moveTo() és lineTo() pontokat.
    • strokeStyle -- Meghatározza vonal színét.
    • lineWidth -- Meghatározza vonal / keretvastagságot.

  3. Kör körív. arc()
    • arc() -- Íves görbét hoz létre. Körök, körívek vagy körök részének létrehozásához.
    • arcTo() ---- Ív, körív.

  4. Ovál bezierCurveTo() és quadraticCurveTo()
    • bezierCurveTo( )
    • quadraticCurveTo( )

  5. Forgatás
    • Rotate() -- Rotációs forgatás.

  6. Új pozíció, méretezés, torzítás.
    • translate() -- Új (0,0) pozíciót határoz meg.
    • transform () -- Lehetővé teszi az aktuális rajz méretezését, torzítását, mozgatását és elhúzását.
    • setTransform() -- Visszaállít / módosít egy megelőző transform() meghatározást.

  7. Szöveg megjelenítése, elhelyezése. fillText() és strokeText()
    • fillText() -- Telikarakteres szöveg és pozíciója.
    • strokeText() -- Kontúrvonalas szöveg és pozíciója.
    • textBaseline() -- Meghatározott szövegpozíció esetén, hól helyezkedjen el a szöveg.

  8. Árnyék és annak mozgatása.
    • shadowColor -- Elmosódság / árnyék színe.
    • shadowBlur -- Elmosódság / árnyék szélessége.
    • shadowOffsetX -- Árnyék vízszintes elmozdítása.
    • shadowOffsetY -- Árnyék függőleges elmozdítása.

  9. Színátmenet, gradient egyenes és körkörös színátmenet
    • createLinearGradient() -- Egyenes színátmenetet létrehozása.
    • createRadialGradient() -- Sugárirányú / köríves színátmenetet létrehozása.
    • addColorStop() -- Megadja a színt és a stop pozíciókat egy gradiens objektumban

  10. Kép beillesztése, a drawimage() metódussal.
    • Használni kívánt képet, minden létező <script> előtt kell elhelyezni,

  11. Láthatóság/átlátszóság, amikor forráskép, a célképen van elhelyezve.
    • globalalfa: Beállítja következő alakzat, átlátszósági értékét. Teljesen átlátszó: 0.0 -- Nincs átlátszóság: 1.0
    • globalCompositeOperation, Célkép és forráskép egymásra helyezésekor, mely terület legyen látható.


Egyenesvonalú alakzatokhoz, rajzolási segéd űrlappal



GoJS diagram bemutató minták.
A GoJS egy JavaScript könyvtár, az interaktív diagramok megvalósításához.