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

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.