A Webfejlesztés blokk honlapja

Canvas, Video

  1. Labdák

    0. feladat

    Készítsd el a képen látható honlapot HTML5 eszközök segítségével. Használd a <figure> és a <figcaption> tag-eket, valamint a labdák neveihez a <cite> tag-et!

    Megoldás

  2. Elforgatott, színes téglalap canvasen

    canvas téglalap

    Készítsd el a képen látható színes transzformált téglalapot HTML5 canvas eszközök segítségével.

    Megoldás

  3. Színátmenetes téglalap canvasen

    canvas téglalap

    Készítsd el az előző feladat módosítását: színátmenetes téglalap HTML5 canvas eszközök segítségével.

    Megoldás

  4. Körök canvasen

    canvas téglalap canvas téglalap canvas téglalap

    Készítsd el a fenti körös ábrákat canvas eszközök segítségével.

    Megoldás

    Megoldás

    Megoldás

  5. Rajzvászon

    HTML 5 -ben lehetőségünk van vektorgrafkus ábrák elkészítésére. Ez az átlagos, nem túl komplex ábrák esetében csökkenti az átviendő adat mennyiségét, bár ennek a modern netkapcsolatok idején kisebb a jelentősége. A haszna abban rejlik, hogy mivel a rajzolás Javascriptből történik, az objektum dinamikusan módosítható. Így sok helyen kiváltható a Flash animáció.
    Rajzterületet a <canvas> taggel hozhatunk létre, majd JavaScript-ből rajzolhatunk rá.

    Feladat: Készítsd el a képen látható ábrát!

    canvas object screenshot

    Segítség:

    • A rajzterületet JavaScriptben úgy érhetjük el, hogy az ID alapján azonosított rajzvászonnak kiválasztjuk a 2D-s elérését. Egyelőre még csak ez lehetséges, de később lehet majd 3D-ben is rajzolni a szabvány fejlesztői szerint. Ezt tegyük meg így: var ctx = document.getElementById("vaszon").getContext("2d");, ahol a ctx változó már a 2D-s használható rajzterületünkre mutat.
    • A kitöltési szín állítása a ctx nevű objektumban: ctx.fillStyle = "rgb(15,155,5)";, ahol a számok rendre 0..255 intervallumban a szín piros, zöld és kék összetevői.
    • A szín mellett átlátszóságot is megadhatunk: fillStyle = "rgba(0, 40, 250, 0.5)";
    • A ceruzánkat rajzoláshoz adott pozícióba amoveTo(x,y) metódussal vihetjük.
    • Vonal húzása az akutális pozícióból: lineTo(x,y)
    • Új vonal kezdése: beginPath()
    • Utoljára rajzolt objektum kitöltése: fill()
    • Téglalap rajzolása: fillRect(x1,y1,x2,y2)

    Megoldás

  6. Szöveg kiemelés

    Jeleníts meg egy tetszőleges cikket egy oldalon az új article tag segítségével, és emelj ki rajta néhány fontos dolgot a szintén új mark taggel. Azt, hogy a kiemelés milyen jellegű legyen, egy JavaScript függvénnyel lehessen megváltoztatni, amit a felhasználó linkek segítségével hívhat meg (tipikusan a háttérszínt érdemes variálni). Ezeket a linkeket egy nav blokkban gyűjtsed össze!

    A feladat képe

    Megoldás: HTML CSS

  7. Video beágyazása

    Töltsd le a következő fájlt: demo.mp4, és ágyazd be egy weboldalba saját vezérlőkkel, folyamatos lejátszással. A video automatikusan induljon el.

    Egy megoldás

  8. Video beágyazása módosítással

    Módosítsuk az előző feladatot. A video lejátszását egy "play" és egy "pause" gombbal vezéreljük.

    Egy megoldás

  9. Szerkeszthető oldal

    Készítsetek egy, form és elemei nélküli szerkeszthető oldalt

    Kulcsszavak: javascript, contenteditable, div, button

    2. feladat

    Egy megoldás

  10. Canvas javascripttel

    Készítsetek el a képen látható négyzetet a benne lévő szöveggel (bitmap) HTML5 és JavaScript segítségével

    Kulcsszavak: javascript, canvas, getcontext, 2d

    3. feladat

    Egy megoldás