Canvas, SVG ja animaatiot

Piirretään canvakselle ja myös SVG-elementeillä. Animoidaan molempia sekä javascriptin että CSS:n avulla.

Keskeneräinen malli

Canvas

Tutustu seuraaviin dokumentteihin:

Tee kaikki seuraavat tehtävät suoraan piirtäen canvas-elementille.

  1. Aloita uusi html-tiedosto. Sijoita tiedostoon canvas-elementti:
    <canvas id="canvas" width="800" height="600"></canvas>
  2. Sijoita sivulle canvas-elementin jälkeen myös tavallinen kuva img-elementillä.
    <p><img src="http://appro.mit.jyu.fi/tiea2120/ohjaus/ohjaus4/car.png" alt="Auto" title="auto" /></p>
  3. Canvakselle voi piirtää sivulle ladattuja kuvia. Kokeile nyt piirtää auto canvakselle. Lisää sivullesi seuraava javascript-koodi:
    window.onload = function() {
        let canvas = document.getElementById('canvas');
        let img = document.querySelector('img');
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
    }
    kts. Using images
  4. Yritä leikata auton ympäriltä turha tyhjä alue pois. Kokeile drawImage-metodin laajinta versiota, jossa voit kertoa minkä osan kuvasta haluat piirtää. Viimeiset parametrit kertovat mihin kohtaan kuva piirretään ja missä koossa. Jos annat saman koon kuin missä kuvan leikkasit niin kuva tulee sellaisenaan canvakselle. Jos annat eri koon niin kuvaa pienennetään tai suurennetaan. Kokeile saatko kuvasta esim. puolet pienemmän tai kaksi kertaa suuremman. Kokeile piirtää useampi eri versio autosta. Kaikki versiot tulevat canvakselle päällekkäin.
  5. Jätä canvakselle vain yksi versio autosta. Piirrä tämän auton alle paksu viiva tieksi. Kts. Drawing shapes. Helpoin tapa piirtää paksu viiva on käyttää fillRect-metodia. Joudut laskemaan oikean paikan riippuen siitä mihin kohtaan piirsit auton ja kuinka korkean auton.
  6. Kirjoita keskelle canvasta teksti "Hello world!". Kts. Drawing text. Joudut määräämään käytetyn fontin ja fontin koon. Saadaksesi tekstin keskelle joudut mittaamaan tekstin viemän tilan measureText()-metodilla.
  7. Piirrä lomakkeen oikeaan yläkulmaan keltainen aurinko ja sen kaveriksi muutama auringonsäde :) Kts. Drawing shapes: Arcs ja ellipse Säteet voi piirtää viivoilla. Käytetyt värit voi asettaa fillStyle - ja strokeStyle-ominaisuuksilla
  8. Lue Transformations. Piirrä vielä yksi auto mutta käännä tämän auton nokka osoittamaan vasemmalle.
    // tallennetaan canvaksen tila
    ctx.save();
    // siirretään origo keskelle autoa. Tämä riippuu siitä mihin kohtaan haluat auton piirtää
    // ja missä koossa
    ctx.translate(60, 345);
    // käännetään x-suunnassa
    ctx.scale(-1,1);
    // piirretään varsinainen auto
    ctx.drawImage(img, 12,30, 120, 90, -60, 0, 120, 90);
    // palautetaan tila
    ctx.restore();
  9. Väännä viimeksi piirtämäsi auto kulkemaan vasemmalle alamäkeen eli 45 asteen kulmaan.
    // väännetään vielä kulmaan
    ctx.rotate((Math.PI / 180) * 45);
  10. Piirrä sinikäyrä canvaksen taustalle. Skaalaa kuvaaja näyttöön sopivaksi.
    ctx.beginPath();
    ctx.moveTo(0, 0);
    let max = 300;
    let nopeus = 20.0;
    let laajuus = 200.0;
    for (let i = 0; i < max; i++)
    {
       let y = parseInt( ((Math.sin(1.0 *i / nopeus)+1.0)* laajuus));
       ctx.lineTo(i, y);
    }
    ctx.stroke();
    
  11. Kokeile miten toimivat bezierCurveTo ja quadraticCurveTo
  12. Piirrä canvakselle kolmen pystypylvään kaavio (bar graph) seuraavasta datasta: demo1: 79, demo2: 81, demo 3: 75. Kirjoita pylväiden otsikot niiden alapuolelle ja pylvään arvo pylvään päälle. Piirrä sopivan muotoiset rectanglet ja tekstit oikeisiin kohtiin.
  13. Käännä kaaviosi arvoineen ja otsikoineen 90 astetta poikittain.

SVG

SVG-kuvat ovat vektorigrafiikka ja canvas käsittelee bittikarttoja. Vektorigrafiikkaa kannattaa käyttää aina kuin vain mahdollista. SVG-kuvia voi tuottaa kuvankäsittelyohjelmilla mutta myös ohjelmallisesti. Keskitytään näissä tehtävissä luomaan ohjelmallisesti yksinkertaisia SVG-grafiikoita. Tarkemmin SVG:hen voit tutustua seuraavien dokumenttien avulla:

Kokeillaan SVG:n käyttämistä:

Animointi

Animaatioita voidaan WWW-sivuilla toteuttaa useilla eri tavoilla. Tällä kurssilla käytämme CSS-animaatiota, SVG-animaatioita SMIL-kielen avulla ja Javascript-animaatiota.

SVG ja SMIL

Lue SVG animation with SMIL

CSS-animaatiot

Myös CSS-animaatiot ovat helppoja. Lue Using CSS animations.

Lisätietoa:

Javascript ja animaatiot

Animaatioita voi kontrolloida ja seurata helposti javascriptilla.

Lisätietoa:

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/ohjaus/ohjaus4/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-10-30 18:05:03
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta