Canvas

canvas-elementti on tarkoitettu pelkästään piirtoalustaksi. Piirtämisen voi tehdä javascriptilla joko Canvas API tai WEBGL-rajapinnan kautta.

<canvas width="100" height="100" >Vaihtoehtoinen sisältö</canvas>

canvas-elementin koon voi määritellä CSS:llä (missä tahansa CSS-yksiköissä) tai suoraan html-attribuutteina (vain pikseleinä). CSS:llä kokoa muuttaessa myös canvaksen mahdollinen sisältö skaalataan automaattisesti uuteen kokoon.

Canvas ei voi olla äärettömän kokoinen. Eri selaimille on erilaiset maksimikoot. Yleensä kokoa 16384x16384 ei kannata ylittää.

HTMLCanvasElement

HTMLCanvasElement tuntee seuraavat ominaisuudet:

HTMLCanvasElement tuntee seuraavat metodit:

Piirtäminen Canvakselle

CanvasRenderingContext2D

CanvasRenderingContext2D tarjoaa rajapinnan varsinaiseen piirtämiseen. Kaikki metodit käsitellään MDN:n CanvasRenderingContext2D-sivulla. Tässä käydään läpi vain olennaisimmat metodit ja ominaisuudet:

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
https://appro.mit.jyu.fi/tiea2120/luennot/canvas/
© 2020-10-19 18:21:54
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta