Canvas elementti

Canvas on HTML5:n myötä tullut kaksiulotteinen grafiikan piirtoalusta. Itse piirto tapahtuu jonkin ohjelmointikielen esim. javascriptin avulla. Canvas elementin html-osuus on esim. seuraava:

<canvas id="omaCanvas" width="200" height="100" style="border:1px solid #000; background:#ccc;">>Valitettavasti selaimesi ei tue Canvas -elementtiä </canvas>

Eli ensin määritetään piirtoalueelle nimi (ID), sitten alueen koko (width/height). Tämän lisäksi voidaan style -komennolla asettaa esim. täyttö ja reunaviiva. Esimerkissä on 1 px levyinen yhtenäinen (solid) reunaviiva (border), joka on väriltään musta (#000). Lisäksi alueelle on annettu täyttöväri (background) harmaa (#ccc). Jos selain ei tue Canvas -elementtiä näytetään perään kirjoitettu teksti, jonka jälkeen komento päätetään </canvas>. Tästä eteenpäin piirto tapahtuu javascript -koodin avulla. Siitä alla muutama esimerkki.

Suorakaide

Javascript koodi kirjoitetaan <script> ja </script> komentojen väliin.

<script>
var c = document.getElementById("omaCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#F00";
ctx.fillRect(50,50,150,75);
</script>

Ensin määritetään muuttuja c (var c=). Toki muuttujan nimi voi olla lähes mikä vaan. Siihen tehdään määritys, jossa kerrotaan mihin canvakseen piirto tapahtuu. Sen jälkeen määritetään muuttuja ctx, jossa edellä määritettyyn muuttujaan c lisätään komento getContext("2d"). Toki oltaisiin voitu kirjoittaa myös suoraan:
var ctx = document.getElementById("omaCanvas").getContext("2d").

Eli nyt kirjoittamalla ctx kirjoitetaan todellisuudessa koko pitkä komento. Itse piirto tapahtuu kirjoittamalla ctx. (ctx ja piste), jonka jälkeen kerrotaan mitä piirretään. Yllä fillRect, joka piirtää täyttövärillä varustetun suorakaiteen, sen jälkeen sulkuihin tulee suorakaiteen vasemman yläkulman sijainti pikseleissä (tässä x=50 ja y=50), jonka jälkeen suorakaiteen leveys ja korkeus (tässä 150 ja 75). Jo tätä ennen pitää kertoa millä värillä alue täytetään fillStyle -komennolla (tässä punainen #F00). Komento ctx.strokeRect(x,y,w,h) olisi tehnyt suorakaiteen, jossa pelkkä reunaviiva. Reunaviivan väri olisi määritetty ctx.strokeFill -komennolla. Yllä olevan olisi voinut kirjoittaa myös vaihe vaiheelta seuraavasti:

ctx.rect(50, 50, 150, 75); - piirretään suorakaide
ctx.fillStyle = '#F00'; - asetetaan täyttöväriksi punainen
ctx.fill(); - täytetään suorakaide

Ympyrä

Ympyrän piirto on vähän hankalampaa. Koodi voisi olla esim. seuraava:

ctx.arc(200,150,50, 0, 2 * Math.PI);
ctx.fillStyle = "#F00";
ctx.fill();

Ympyrä piirretään kaaren (arc) avulla. Suluissa olevista luvuista ensimmäinen (200) kertoo ympyrän keskipisteen sijainnin x-suunnassa ja toinen (150) y-suunnassa. Kolmas luku on ympyrän säde (50). Neljäs luku kertoo piirron aloituskohdan, 0 vastaa kello kolmea (katso esimerkki w3school -sivuilta). Viides luku on kehän pituus. 2 x PII tuottaa koko ympyrän, 1 x PII puoliympyrän (katso esimerkki w3school -sivuilta). Jos halutaan pelkkä reunaviiva (yllä täytetty ympyrä) alkaa koodi ctx.beginPath(); -komennolla, sen jälkeen ctx.arc -komento normaalisti ja lopuksi komento ctx.stroke();.

Suora viiva

Suoran viivan piirtävä koodi voisi olla esim. seuraava:

ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(200,100);
ctx.stroke();

ctx.begin.Path(); aloittaa viiva piirron. ctx.moveTo määrittää viivan aloituspisteen (yllä x suunnassa 10 px ja y suunnassa 100 px). ctx.lineTo määrittää vastaavasti viivan lopetuspisteen. ctx.Stroke -komento piirtää itse viivan. ctx.lineWidth=3 -komennolla voidaan haluttaessa määrittää viivan paksuus (yllä 3 pikseliä). Viivan väri saataisiin ctx. strokeStyle = "#F00" -komennolla.

Teksti

Tekstiä canvas alueelle voisi kirjoittaa esim. seuraavasti:

ctx.font = "18px Arial";
ctx.fillStyle="#F00";
ctx.fillText("Hei Maailma",10,50);

ctx.font määrittää käytettävän fontin ja fonttikoon, fillStyle -komento tekstin värin. ctx.fillText -komentoon tulee ensin lainaismerkkien sisään lisättävä teksti ja sitten pilkun jälkeen tekstin aloituskohdan koordinaatit (x,y). Tekstiä voi myös kiertää (kuten muitakin elementtejä) ctx.rotate -komennolla (katso esimerkki w3school -sivuilta).

Liukuväri

Myös liukuvärien käyttö on mahdollista. Alla esimerkki, jossa suorakaiteeseen luodaan liukuväri sinisen ja keltaisen välille.

var grd = ctx.createLinearGradient(0,0 , 400, 0);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "yellow");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 400, 100);

Alussa luodaan ensin muuttuja grd, jossa luodaan lineaarinen liukuväri, jonka aloitus kohta on 0,0 ja lopetuskohta 400,0). Toisella rivillä lisätään siihen aloitusväri sininen, kolmannella lopetusväri keltainen. Neljännellä rivillä fillStyle arvoksi asetetaan edellä luotu grd -muuttuja, joka pitää sisällään aloitus- ja lopetuskohdan sekä aloitus- ja lopetusvärin. Viidennellä rivillä piirretään suorakaide joka alkaa kohdasta 20,20 ja on kooltaan leveys 400 pikseliä, korkeus 100 px. Tähän suorakaiteeseen asetetaan yläpuolella luotu liukuväri.

Esimerkki

Katsotaan seuraavaksi yksinkertainen esimerkki Canvas -elementin käytöstä.

 

Yllä oleva kuva muodostuu seuraavasta koodista (script -osuus, ei itse canvas -määritystä) -kommentteja punaisella:

<script>

var canvas = document.getElementById("aanimaarat");
var ctx=canvas.getContext("2d");
ctx.font="24px Arial"; - ensin tekstit
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Kansanäänestys Eroamisesta", canvas.width/2, 40); - keskitetään teksti jakamalla leveys kahdella
ctx.textAlign= "left";
ctx.fillText("Kannatan", 100, 380);
ctx.fillText("Vastustan", 300, 380);
ctx.font="14px Arial";
ctx.fillText("100 %", 10, 50);
ctx.fillText("80 %", 10, 110);
ctx.fillText("60 %", 10, 170);
ctx.fillText("40 %", 10, 230);
ctx.fillText("20 %", 10, 290);

ctx.beginPath(); - sitten viivat tässä x-akseli
ctx.moveTo(50, 350);
ctx.lineTo(450, 350);
ctx.stroke();

ctx.beginPath(); - tässä y-akseli
ctx.moveTo(50, 350);
ctx.lineTo(50, 50);
ctx.stroke();

ctx.beginPath(); - tässä piirretään kerralla useampi viiva siten että aina lisätään y-arvoa 60 px (jos y<300)
for (y=110; y < 300; y+=60) {
ctx.moveTo(50,y);
ctx.lineTo(450,y);
}
ctx.stroke();

var kan= 40; - tässä asetetaan muuttuja kan, joka on kannattajien määrä prosenteissa
var vas= 60; - tässä asetetaan muuttuja vas, joka on vastustajien määrä prosenteissa

ctx.fillRect(70,350,150,kan*-3); - lasketaan kannattajien pylvään korkeus, yksi % = 3 pikseliä
ctx.fillRect(270,350,150,vas*-3); - lasketaan vastustajien pylvään korkeus, yksi % = 3 pikseliä

</script>

Näinhän tässä ei ole mitään järkeä, mutta jos tässä olisi todellinen tilanne kyseessä, voitaisiin muuttujien kan ja var arvot hakea tietokannasta esim. 10 sekunnin välein. Näin kannatuksen muutokset päivittyisivät jatkuvasti ruudulla.