Canvas Tegning og animasjon med canvas

Grafikk
med canvas
Gløer Olav Langslet
Sandvika VGS
Høsten 2011
Informasjonsteknologi 2
Canvas
Læreplansmål
Eleven skal kunne
bruke programmeringsspråk i
multimedieapplikasjoner
vurdere og bruke relevante
filformater for tekst, bilde, lyd,
video og animasjoner
Med CSS3, HTML og JavaScript kan vi forme
elementer og lage animasjoner. Vi kan lage
animasjoner med bilder, og vi kan til og med
styre bevegelse med tastene på keyboardet.
Med det nye canvas-elementet i HTML5 kan vi
nå også tegne figurer rett i nettleseren med
JavaScript. Det er det det skal handle om i denne
leksjonen.
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
html5
canvas
komme i gang
Canvas er en egen html-tagg. Den må ha en bestemt bredde og lengde, og vi legger den
inn i body på siden. For at vi skal kunne få tak i den, gir vi den også en id.
HTML
Vi starter som vanlig med et script i head på siden vår. Her skal vi få tak i canvaselementet:
JavaScript
canvas.getContext(”2d”) sier at vi skal tegne i 2 dimensjoner. Det betyr at det i fremtiden
vil være mulig å tegne i 3d. Når alt er lastet inn, starter vi funksjonen draw.
2
Grafikk med canvas-elementet
Informasjonsteknologi 2
Tegne en firkant
Dette er det enkleste eksempelet vi kan få til med canvas-elementet. Vi bruker
funksjonen fillRect, som tar fire parametre, startpunkt for x og y og bredde og høyde:
Så her starter vi 10 piksler fra kanten av canvas-elementet, og tegner en firkant som
er 100 piksler bred og høy.
Det kan være lurt å legge på litt css for å se rammen rundt canvas-elementet:
Vi ser at firkanten ble sort, men dette kan vi overstyre ved å velge en fillStyle:
Da ble firkanten sannelig min hatt rød.
Tegne flere firkanter oppå hverandre
Det er mulig å tegne flere fikanter oppå hverandre. De du tegner sist legger seg øverst:
3
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
Vi lager det norske flagget
Vi starter opp med å lage canvas-elementet vårt i body i html-koden:
Setter det hele i gang med JavaScript:
Så er det bare å begynne å tegne. Først starter vi opp med rød bakgrunn som dekker
hele canvasen:
Bakgrunnen er på plass.
4
Grafikk med canvas-elementet
Informasjonsteknologi 2
Det hvite korset
Vi forsøker å tegne det hvite korset oppå den røde bakgrunnen:
Og da fikk vi vel det danske flagget.
Da mangler vi bare det blå. Vi følger samme oppskriften som før:
5
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
Andre former
Vi kan tegne andre figurer enn rektangel, men det er ikke egne funksjoner for dette.
Vi må trekke opp linjer (paths), og fylle eller legge på en ramme rundt disse.
Trekk opp en sti (path):
Vi sier først at vi starter på en sti. Så flytter vi startpunktet til 10 piksler fra venstre
kant og toppen ctx.moveTo(10, 10).
Deretter trekker vi en linje bort til (110, 10), altså 100 piksler rett til høyre.
Kanskje vi klarer å tenge et hus?
6
Grafikk med canvas-elementet
Informasjonsteknologi 2
Vi tegner et lite
hus
Tegne hus med canvas
Vi kan i prinsippet tegne det meste på canvas-elementet.
Hva med et lite hus?
Vi kan også fylle huset
med en farge hvis vi
ønsker det.
Da skriver vi i stedet:
ctx.fillStyle = ”#ff0000”;
og til slutt:
ctx.fill();
7
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
Hva med en sirkel?
Rektangelet har en egen funksjon, men sirkelen har det ikke. Vi må ty til
trigonometrien for å få til en sirkel.
Det vil si, vi har en nesten ferdig funksjon. Men den kan like gjerne lage et kakestykke
som en sirkel. Parameterne er
x: startpunkt horisontalt for sentrum av sirkelen
y: startpunkt vertikalt for sirkelen
radius: sirkelens radius
startAngle: hvor skal den starte, altså fra hvilken vinkel angitt i radianer
endaAngle: hvor den skal slutte
antiClockwise: om den skal gå mot klokken eller ikke
arc (x, y, radius, startAngle, endAngle, antiClockwise)
Vi lager en sirkel med
• startpunkt i (150, 150)
• radius = 50
• starter på vinkel 0 grader
• Skal gå 360 grader = 2 pi (i radianer)
• Går mot klokken
8
Grafikk med canvas-elementet
Informasjonsteknologi 2
En sirkel som vokser
Vi har tidligere lært hvordan vi kan flytte html-elementer med setInterval. Dette
fungerer like godt, om ikke bedre, inne i canvas-elementet.
La oss se om vi kan bruke samme teknikken til å lage en sirkel som vokser seg stor.
Dette er nesten identisk med koden på forrige side, men vi deklarerer en variabel for
radiusen som vi kan øke hver gang vi kjører tegnSirkel-funksjonen. Dette blir heftig.
Men kan vi stoppe den når den kommer opp i en viss radius?
Selvsagt. Vi bruker samme teknikken som i regnespillet med clearInterval når radiusen
har blitt for eksempel 150:
9
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
Kan vi gjøre noen andre spik?
Vi kan flytte på objekter også. La oss lage en liten ball og se om vi får noe fart på den:
Vi flytter egentlig ikke ballen, men vi tegner opp en ny i en ny posisjon hver gang
funksjonen kjører. Vi tegner også opp bakgrunnen hver gang funksjonen kjører. Hvis vi
ikke gjør det, vil alle ballene vi lager ligge der og lage et spor.
10
Grafikk med canvas-elementet
Informasjonsteknologi 2
Ball som lager spor
La oss tegne bakgrunnen inn i onload-funksjonen for å se hva som skjer hvis vi
ikke tegner bakgrunnen hver gang:
Her har vi bare flyttet koden som lager sort bakgrunn opp i onload-funksjonen.
Eventuelt kan vi sette en bakgrunnsfarge med css og bruke clearRect i stedet.
11
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
Let the motion begin
La oss se om vi klarer å lage et partikkelsystem som vist i videoen til Seb Lee-Delislie.
Det starter ganske enkelt, og så blir det litt mer komplisert på slutten.
Først setter vi opp html-koden med canvas-elementet:
Vi setter sort bakgrunn på canvas-elemntet, sånn at vi kan bruke clearRect og beholde
bakgrunnsfargen.
12
Grafikk med canvas-elementet
Informasjonsteknologi 2
Lager en liten firkant
Vi tegner opp en liten firkant:
Rett etter style-blokken i head legger vi skriptet vårt:
Prøv deg frem med å endre på verdiene for å se hva som skjer. Rekkefølgen er:
startposisjon x, starposisjon y, bredde, høyde.
La oss lagre x-posisjonen i en variabel som vi kaller x:
I linje 20 setter vi verdien til 250.
I linje 31 bytter vi ut 250 med verdien av x.
13
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
Skap bevegelse med setInterval
Intet nytt ennå; vi bruker setInterval for å kunne flytte på firkanten:
I funksjonen øker vi x med 1 hver gang den kjøres:
Endring i linje 33: Øker nå x med 1 hver gang. Da ser vi at vi tegner opp en ny firkant
hver gang, så det ser ut som om den vokser seg større. For å unngå dette, kan vi bruke
clearRect for å fjerne alt som er på canvasen:
14
Grafikk med canvas-elementet
Informasjonsteknologi 2
Håndtere svarene
La oss lage en variabel for farten også:
I linje 21 setter vi farten til 2. Nå kan vi endre den i toppen av koden. Det er kjekt.
Nå kan vi øke posisjonen til firkanten med xSpeed i stedet for 1:
I linje 39 setter vi x-posisjonen til å bli x + xSpeed. Det gjør at vi kan flytte den til
venstre ved å sette xSpeed til et negativt tall, og vi kan regulere farten.
La oss sette farten i x-retningen til et tilfeldig tall mellom -20 og 20:
Denne skal gjøre susen.
15
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
Vi lager et objekt for å ta vare
på verdier
Det blir mange verdier å ta vare på. Vi kan lagre dette i et objekt som vi kaller blob:
Dette skal vi komme tilbake til når vi skal begynne med objektorientert
programmering. Tenk på det nå som en beholder hvor vi kan lagre en del variabler som
har en sammenheng – de skal alle på et vis styre firkanten vår.
Nå må vi gjøre noen endringer nede i draw-funksjonen:
I stedet for å ta x direkte, går vi nå via blob-objektet. Se på blob-objeket som en
beholder for alle egenskapene til firkanten.
Endringenen skjer i linje 40 og 42.
16
Grafikk med canvas-elementet
Informasjonsteknologi 2
y vil være
med
Legg til bevegelse i y-retningen
Det blir jo ikke noe partikkelsystem hvis det kun beveger seg en vei. Vi må sørge for at
firkanten kan gå litt opp og ned også. Vi legger til flere egenskaper for firkanten:
Så må vi gjøre noen endringer nede i draw-funksjonen for å iverksette den vertikale
bevegelsen.
Legger til vertikal bevegelse i linje42 og endrer posisjonen i linje 45.
17
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
lage mange
firkanter
Vi vil gjerne lage mange firkanter siden det skal bli et partikkelsystem
Vi oppretter et array for å holde oversikten over firkantene våre:
Siden vi skal lage mange firkanter, kan vi forsøke å lage en firkant hver gang drawfunksjonen kjører:
Hver gang vi lager en blob, putter vi den inn i arrayet:
18
Grafikk med canvas-elementet
Informasjonsteknologi 2
lage mange
firkanter
Da må vi gå gjennom arrayet, og lage en ny firkant med de egenskaper som blir satt
Og vips har vi laget et slags partikkelsystem.
19
sdsd
Grafikk med canvas-elementet
Informasjonsteknologi 2
krympe
firkantene
Vi vil gjerne krympe firkantene gradvis. Da må vi ha en egenskap for størrelse:
I linje 37 setter vi en egenskap for størrelse.
Neste skritt er å anvende denne egenskapen, så vi kan minske den hver gang
funksjonen kjører:
I linje 48 setter vi størrelsen til vår nye variabel blob.size.
I linje 53 minsker vi størrelsen inkrementelt ved å gange den med 0.96.
Da skal den krympe gradvis for å bli helt borte.
20
Grafikk med canvas-elementet
Informasjonsteknologi 2
oppgaver
Oppgaver til denne leksjonen
1. Bruk canvas-elementet og JavaScript til å lage ett eller flere flagg du liker.
2. Lag en tegning av et fjes eller noe annet med canvas/JavaScript
3. Klarer du å legge til gravitasjon i partikkelsystemet vårt, eller legge til spor
eller noe helt annet?
21