<canvas> -elementin käyttöä

Yleistä asiaa elementistä

HTML5:n <canvas> -elementin ansiosta on helppo luoda kuvia ja piirtää ja kirjoittaa sivulle ns. lennosta. Sen avulla voi myös luoda animaatio-tehosteita ja pelejä. Tähän kaikkeen tarvitsee tietysti JavaScriptiä, sillä canvas-elementti luo vain puitteet edellä mainituille. Kutsun tällä sivustolla canvas-elementin luomaa aluetta piirtoalueeksi tai vain alueeksi.

Tällä sivustolla käsitellään vain vähän perusteita, kuten kuvan luominen, tekstin kirjoittaminen, suoran viivan ja suorakulmion piirtäminen ja täyttäminen värillä. Paljon lisää materiaalia englanniksi löytyy esimerkiksi sivulta html5canvastutorials, joka on myös tämän sivuston sisällön lähde.

Elementin luominen

Canvas-elementti luodaan samoin kuin muutkin HTML:n tagit. Siihen ei kuitenkaan laiteta sisältöä muiden tagien tapaan vaan sen sisältö määritellään JavaScriptillä. Sen ulkonäköä, kuten reunuksia tai paikkaa sivulla voi muokata normaalisti CSS:llä. Kun alue luodaan, annetaan sille leveys ja pituus, ja se kannattaa myös yksilöidä. JavaSkriptillä otetaan canvas-elementti käyttöön ja luodaan sille "konteksti". Sen avulla voidaan piirtää yms. alueelle, käyttäen valmiita funktioita. Canvas-elementillä voi olla vain yksi "konteksti" eli se tarvitsee luoda vain kerran.

<body>
   // Luodaan canvas-elementti.
   <canvas id="area" width="500" height="500"></canvas>

   <script type="text/javascript">
      // Haetaan canvas-elementti käytettäväksi sen yksilöinnin avulla.
      var canvas = document.getElementById("area");
      // Luodaan sille "konteksti".
      var context = canvas.getContext("2d");
   </script>
</body>

Pelkästä alueen luomisesta ei ole iloa, joten kannattaa jatkaa muihin osiohin. Lue kuitenkin vielä seuraava kappale, se auttaa hahmottamaan mm. alueelle piirtämistä.

Asemointi piirtoalueella

Elementin luomalle alueelle piirrettäessä annetaan piirrettävälle asialle aina koordinaatit. Koordinaatisto muistuttaa xy-koordinaatistoa, mutta on tärkeää huomata, että origo (eli piste, jossa koordinaatit ovat 0, 0) sijaitsee vasemmassa yläkulmassa ja siitä oikealle kasvaa x-koordinaatti, kuten tavallisesti, kun taas y-koordinaatti kasvaa xy-koordinaatistosta poiketen alaspäin mentäessä.

piirtoalueen koordinaatit

Piirtoalueen tyhjentäminen

Piirtoalueen tyhjentäminen onnistuu erittäin helposti, siihen tarkoitetun valmiin funktion avulla. Funktiota kutsuttaessa parametreina annetaan alueen vasemman yläkulman koordinaatit (0, 0) ja alueen leveys ja pituus.

<body>
   <canvas id="area" width="500" height="500"></canvas>

   <script type="text/javascript">
      var canvas = document.getElementById("area");
      var context = canvas.getContext("2d");

      // Alueen tyhjentäminen.
      context.clearRect(0, 0, canvas.width, canvas.height);
   </script>
</body>