# Tehtävä: Tutustu Canvas API:in ## Oppimistavoitteet Tämän tehtävän suorittamalla osoitat ymmärtäväsi Canvas API:n perusteet ja sovellat luovaa ongelmanratkaisua rakentaaksesi visuaalisia elementtejä JavaScriptin ja HTML5-canvasin avulla. ## Ohjeet Valitse yksi Canvas API:n osa-alue, joka kiinnostaa sinua, ja luo sen ympärille mukaansatempaava visuaalinen projekti. Tämän tehtävän tarkoituksena on kannustaa sinua kokeilemaan oppimiasi piirto-ominaisuuksia ja luomaan jotain ainutlaatuista. ### Projektiehdotuksia inspiraatioksi **Geometriset kuviot:** - **Luo** galaksi, jossa tähdet tuikkivat animoidusti satunnaisissa paikoissa - **Suunnittele** mielenkiintoinen tekstuuri toistuvilla geometrisilla muodoilla - **Rakenna** kaleidoskooppiefekti pyörivillä, värikkäillä kuvioilla **Interaktiiviset elementit:** - **Kehitä** piirustustyökalu, joka reagoi hiiren liikkeisiin - **Toteuta** muotoja, jotka vaihtavat väriä klikkauksen jälkeen - **Suunnittele** yksinkertainen animaatiosilmukka liikkuvilla elementeillä **Peliin liittyvät grafiikat:** - **Luo** vierivä tausta avaruuspeliä varten - **Rakenna** hiukkasefektejä, kuten räjähdyksiä tai taikaloitsuja - **Tee** animoituja spritejä, joissa on useita kehyksiä ### Kehitysohjeet **Tutkimus ja inspiraatio:** - **Selaa** CodePeniä löytääksesi luovia canvas-esimerkkejä (inspiraatiota varten, ei kopiointiin) - **Tutustu** [Canvas API -dokumentaatioon](https://developer.mozilla.org/docs/Web/API/Canvas_API) löytääksesi lisää metodeja - **Kokeile** erilaisia piirtofunktioita, värejä ja animaatioita **Tekniset vaatimukset:** - **Käytä** oikeaa canvas-asetusta `getContext('2d')`-metodilla - **Sisällytä** merkityksellisiä kommentteja, jotka selittävät lähestymistapasi - **Testaa** koodisi huolellisesti varmistaaksesi, että se toimii virheettömästi - **Sovella** modernia JavaScript-syntaksia (const/let, nuolifunktiot) **Luova ilmaisu:** - **Keskity** yhteen Canvas API -ominaisuuteen, mutta tutki sitä syvällisesti - **Lisää** oma luova näkemyksesi, jotta projekti tuntuu henkilökohtaiselta - **Pohdi**, miten luomuksesi voisi olla osa laajempaa sovellusta ### Palautusohjeet Palauta valmis projektisi yhtenä HTML-tiedostona, jossa on upotettu CSS ja JavaScript, tai erillisinä tiedostoina kansiossa. Sisällytä lyhyt kommentti, jossa selität luovat valintasi ja Canvas API -ominaisuudet, joita tutkit. ## Arviointikriteerit | Kriteeri | Erinomainen | Riittävä | Parannettavaa | |----------|-------------|----------|---------------| | **Tekninen toteutus** | Canvas API käytetty luovasti useilla ominaisuuksilla, koodi toimii moitteettomasti, moderni JavaScript-syntaksi käytössä | Canvas API käytetty oikein, koodi toimii pienin puuttein, perusratkaisu | Canvas API:ta yritetty käyttää, mutta koodi sisältää virheitä tai ei toimi | | **Luovuus ja suunnittelu** | Erittäin omaperäinen konsepti, viimeistelty visuaalinen ilme, syvällinen tutkimus valitusta Canvas-ominaisuudesta | Hyvä Canvas-ominaisuuksien käyttö, joitakin luovia elementtejä, vakaa visuaalinen lopputulos | Perustoteutus, jossa vähän luovuutta tai visuaalista houkuttelevuutta | | **Koodin laatu** | Hyvin organisoitu, kommentoitu koodi, joka noudattaa parhaita käytäntöjä, tehokkaat algoritmit | Siisti koodi, jossa joitakin kommentteja, noudattaa peruskoodausstandardeja | Koodi on epäjärjestelmällistä, vähän kommentteja, tehottomat toteutukset | ## Pohdintakysymykset Projektin valmistuttua pohdi seuraavia kysymyksiä: 1. **Minkä Canvas API -ominaisuuden valitsit ja miksi?** 2. **Mitä haasteita kohtasit projektia rakentaessasi?** 3. **Miten voisit laajentaa tätä projektia suuremmaksi sovellukseksi tai peliksi?** 4. **Mitä muita Canvas API -ominaisuuksia haluaisit tutkia seuraavaksi?** > 💡 **Vinkki**: Aloita yksinkertaisesti ja lisää vähitellen monimutkaisuutta. Hyvin toteutettu yksinkertainen projekti on parempi kuin liian kunnianhimoinen projekti, joka ei toimi kunnolla! --- **Vastuuvapauslauseke**: Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulisi pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.