Html5 bemutató
A vászonelem létrehozásakor meg kell adnia a id attribútumot (meghatározza az elem nevét, hogy hozzáférjen a szkriptekből) és annak dimenzióit a szélesség és a magasság attribútumokkal.
A címkék között elhelyezett tartalom akkor jelenik meg, ha a felhasználó böngészője nem támogatja a vászonelemet.
Figyelj: maga a vászon semmit sem rajzol. Ez egy vászon, amely lehetőséget nyújt ügyfélskriptek rajzolására.
Töltött téglalapot rajzol.
Nem festett téglalapot rajzol.
Törli a megadott területet, így teljesen átlátható.
Megjegyzés: Az x és y paraméterek megadják a téglalap vízszintes eltolásának (x) és függőleges (y) mennyiségét a vászon bal felső sarkában pixelben.
Most próbáljunk rajzolni valamit a vászonra.
- var canvas = document.getElementById ("rajzolás") - megtalálja a kívánt vászont;
- var x = canvas.getContext ("2d") - hivatkozzon a beépített objektumra, amely különböző rajzolási módszereket tartalmaz (az első két lépés a vászon bármely objektumának rajzolásához szabványos);
- x.fillRect (50,40,55,55) - rajzoljon egy töltött téglalapot;
- x.strokeRect (150,70,55,55) - rajzoljon egy nem festett téglalapot;
- x.clearRect (68,57,20,20) - tisztítsa meg a téglalap alakú területet.
Az összetett ábrák több kapcsolódó egyszerű tárgyból (például vonalakból, körökből stb.) Állnak.
Megjegyzés: előfordulhat, hogy a closePath () metódus nem jelenik meg.