HTML Canvas -kurssit

HTML <canvas> -elementti käytetään grafiikoiden piirtämiseen verkkosivuilla.

Yllä oleva kuva on luotu <canvas>-elementillä.

Se näyttää neljä elementtiä: punainen suorakulmio, peittoutuva suorakulmio, monivärisuorakulmio ja moniväriteksti.

Mitä HTML Canvas on?

HTML <canvas>-elementti käytetään grafiikoiden dynaamiseen piirtämiseen skriptin avulla (yleensä JavaScript).

<canvas>-elementti on vain grafiikan säiliö. Sinun on käytettävä skriptiä (yleensä JavaScript) piirtääksesi todelliset grafiikat.

Canvasilla on useita tapoja piirtää polkuja, laatikoita, ympyröitä, tekstejä ja lisätä kuvia.

HTML Canvas voi piirtää tekstejä

Canvas voi piirtää värikkäitä tekstejä ja niitä voidaan animoida.

HTML Canvas voi piirtää graafeja

Canvasilla on voimakas kyky esittää graafisia tietoja kuvina ja kaavioina.

HTML Canvas voi animoida

Canvas-objekti voidaan siirtää. Mahdollisuuksia on loputon: yksinkertaisista hyppivistä palloista monimutkaisiin animaatioihin.

HTML Canvas voi olla interaktiivinen

Canvas voi vastata JavaScript-tapahtumia.

Canvas voi vastata mihin tahansa käyttäjän toimintaan (painallukset, hiiren klikkaus, painikkeen klikkaus, sormen liikkuminen).

HTML Canvas voidaan käyttää peleihin

Canvasin animaatiotavat tarjoavat paljon mahdollisuuksia HTML-pelisovelluksille.

Canvas Esimerkki

HTML:ssä <canvas>-elementti näyttää tältä:

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas>-elementillä täytyy olla id-ominaisuus, jotta JavaScript voi viitata siihen.

Width ja height -ominaisuudet ovat välttämättömiä maalauksen koosta.

Vinkki: HTML-sivulla voi olla useita <canvas>-elementtejä.

Oletuksena <canvas>-elementti ei ole reunaa eikä sisältöä.

Jos haluat lisätä reunan, käytä style-ominaisuutta:

Esimerkki

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Kokeile itse

Seuraavissa luvuissa kuvataan, miten maalataan pöydälle.

Katso myös:

CodeW3C.com:n täydellinen Canvas-ohjekirja

Selaimen tuki

<canvas> -elementti on HTML5-standardi (2014).

Kaikki nykyaikaiset selaimet tukevat <canvas>: