Canvas
Vi vil i gruppen undersøge følgende
Hvad er canvas tagget?
Hvilke ting kan man bruge det til og med hvilke parametre bruger man det ?
Hvorfor er det godt at bruge ?
Historien bag
Canvas elementet blev introduceret af Apple i 2004. Apples dashboard elementer er blevet lavet med Canvas og ellers kan man bruge det til at lave spil, grafik, animationer og billeder.
Hvad er Canvas tag i HTML 5
Et canvas tag i HTML 5 er et tag <canvas> man bruger til at definere et område på en side der ikke har nogen ramme (usynlig) eller en ramme kan tilføjes så man bedre kan få et overblik over området.
Der kan tilføjes utallige canvas områder på en html side.
Når man bruger kanvas tagget er det vigtigt at kunne kende forskel på elementet og kanvas kontekst fordi man ofte balder de to sammen. Canvas elementet er faktisk et DOM node som er indlejret i HTML siden. Konteksten er et objekt med indstillinger. Det kan være 2D eller webgl 3D.
Man kan bruge metoder til at ændre grafikken indeni Canvas elementet
Et kanvas område kan få tildelt et id som alle andre elementer.
Du skal forestille dig at canvas ser ud som et felt med en x og y akse
billedet her er tegnet med canvas tagget:
Tags brugt:
MoveTo:bestemmer hvilke “felter der skal påvirkes
LineTo:Du bevæger dig i pixels på tværs af x og y akserne.
StrokeStyle: her kan du vælge farve på stroke. f.eks #000
Stroke: det der “fylder” disse felter med noget vi kan se
skal du starte en ny “sti” skriver du
beginPath: Har du tegnet én streg og vil starte en ny streg et andet sted i feltet.
Eksempel på en simpel Canvas tegning
Forklaring af de vigtigste udtryk:
fillstyle: kan være farve, mønster eller gradient.
fillrect: her kan du tegne en firkant med fyld.
strokestyle: som fillstyle bare med stroke
strokerect: tegner en firkant uden fyld.
clearrect:fjerner pixels i en firkant du har tegnet.
font:her kan du vælge font som i css
fillText:Her angiver du hvilken placering på x og y aksen teksten skal placeres eks (“x”, 248,) (“x”, 134,)
Hvorfor er det godt at bruge canvas:
-
Canvas er sikkert at bruge og passer med multi platform.
-
Du kan lege med pixels og farve såvel som hastighed
-
Du kan gemme dit Canvas som billede
-
at loade end et billede
brugte links
http://en.wikipedia.org/wiki/Canvas_element
Eksempler på seje ting der er lavet i Canvas
Canvas er sikkert at bruge og passer med multi platform.
Du kan lege med pixels og farve såvel som hastighed
Du kan gemme dit Canvas som billede
at loade end et billede
Ingen kommentarer:
Send en kommentar