Aloittaminen canvasin kanssa JavaScriptissä
Canvas on erityinen piirtokenttä
selaimessa JavaScriptillä. Tämä kenttä tehdään
käyttämällä tagia <canvas>, jolle
tulee määrittää leveys ja korkeus:
<canvas width="200" height="200"></canvas>
Työskennelläksesi tämän kentän kanssa JavaScriptissä saamme aluksi viittauksen tähän tagiin johonkin muuttujaan:
let canvas = document.querySelector('canvas');
Sitten tälle muuttujalle on sovellettava
metodia getContext:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
Voidaan yksinkertaistaa:
let ctx = document.querySelector('canvas').getContext('2d');
Tuloksena muuttujaan ctx tallentuu
objekti, joka sisältää niin kutsutun
suorituskontekstin. Kaikki piirtäminen
tapahtuu tämän objektin metodien avulla. Niiden opiskeluun
ryhdymme seuraavissa
oppitunneissa.
