Canvas, Video
-
Labdák
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!
-
Elforgatott, színes téglalap canvasen
Készítsd el a képen látható színes transzformált téglalapot HTML5 canvas eszközök segítségével.
-
Színátmenetes téglalap canvasen
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.
-
Körök canvasen
Készítsd el a fenti körös ábrákat canvas eszközök segítségével.
-
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!
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 a
moveTo(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)
- 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:
-
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!
-
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.
-
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.
-
Szerkeszthető oldal
Készítsetek egy, form és elemei nélküli szerkeszthető oldalt
Kulcsszavak: javascript, contenteditable, div, button
-
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