HTML <canvas> tagi

Määrittely ja käyttö

<canvas> Tagit piirretään yleensä skriptin (yleensä JavaScript) avulla reaaliajassa.

<canvas> Tagi on läpinäkyvä, se on vain grafiikan säiliö, ja sitä voidaan käyttää grafiikan todelliseen piirtämiseen vain skriptin avulla.

Pois kytketyissä JavaScriptistä olevissa selaimissa ja joissa ei tueta <canvas> selaimessa näytetään <canvas> Teksti, joka on elementin sisällä.

Vinkki

Opitaan HTML Canvas -opetuksestamme <canvas> elementin lisätietoihin.

Jos haluat tarkastella kaikkia ominaisuuksia ja menetelmiä täydellisessä referenssissä, vieritse HTML Canvas viittausopas.

Esimerkki

Esimerkki 1

Piirrä reaaliaikaisesti punainen suorakulmio ja näytä se <canvas>-elementissä:

<canvas id="myCanvas">
Selaimesi ei tue canvas-elementtiä.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Kokeile itse

Esimerkki 2

Toinen canvas-esimerkki:

<canvas id="myCanvas">
Selaimesi ei tue canvas-elementtiä.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Avaa läpinäkyvyys
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Kokeile itse

Ominaisuus

Ominaisuus Arvo Kuvaus
height Pixeliarvo Määrittää maalauslautan korkeuden. Oletusarvo on 150.
width Pixeliarvo Määrittää maalauslautan leveyden. Oletusarvo on 300.

Globaalit ominaisuudet

<canvas> Tämä tagi tukee myös HTML:n globaalit ominaisuudet.

Tapahtumamäärittelyominaisuuksia

<canvas> Tämä tagi tukee myös HTML:n tapahtumamäärittelyominaisuudet.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <canvas> Elementti:

canvas {
  height: 150px;
  width: 300px;
}

Kokeile itse

Canvasin historia

Tämä HTML-elementti on suunniteltu asiakkaan vektor grafiikalle. Se ei itsessään toimi, mutta se esittelee piirto API:n asiakkaan JavaScriptille, jotta skripti voi piirtää haluamansa asiat yhteen maalauslautaan.

<canvas>-elementti oli Applen esittämä Safari 1.3 -selaimessa. Tämä HTML:n perustavanlaatuinen laajennus syynä oli, että HTML:n piirtokyky Safari:ssa käytetään myös Mac OS X -työpöytänä olevan Dashboard-komponentin kanssa, ja Apple halusi tavan tukea skriptatuja kuvia Dashboardissa.

Firefox 1.5 ja Opera 9 seurasivat Safarin johtajuutta. Molemmat selaimet tukevat <canvas>-elementtiä.

Voimme jopa käyttää <canvas>-elementtiä IE:ssä ja rakentaa yhteensopivuuden VML-tuen pohjalta avoimen lähdekoodin JavaScript-koodilla (Googlein aloitteesta). Katso myös:http://excanvas.sourceforge.net/.

Standardointityöt <canvas>-elementille edistävät epävirallista Web-selaimen valmistajien yhdistystä, ja tällä hetkellä <canvas> on HTML 5 -luonnoksessa virallinen merkki. Katso myös:http://www.whatwg.org/specs/web-apps/current-work/

Eroja <canvas>-elementin, SVG:n ja VML:n välillä

Tärkeä ero <canvas>-elementin, SVG:n ja VML:n välillä on, että <canvas> käyttää JavaScript-pohjaista piirto-API:a, kun SVG ja VML käyttävät XML-dokumenttia kuvaukseksi.

Nämä kaksi tapaa ovat toiminnallisesti yhtä arvoisia, ja yhtä voidaan simuloida toisella. Ulkoisesti ne ovat erittäin erilaisia, mutta jokaisella on vahvuutensa ja heikkoutensa. Esimerkiksi SVG-kuviot ovat helppoja muokata, kun ne poistetaan niiden kuvauksesta.

Jos haluamme poistaa elementin samasta <canvas>-elementistä, meidän täytyy usein pyyhkiä piirto pois ja piirtää se uudelleen.

Miten käyttää <canvas>-elementtiä piirtämiseen

Useimmat Canvas-piirto-API:t eivät ole määritelty <canvas>-elementissä, vaan ne määritellään sen kautta. getContext() -menetelmäSaamamme 'piirtoympäristö' -objektiin.

Canvas API käyttää myös polun esittämismekanismia. Polku määritellään kuitenkin sarjalla metodikutsuja, ei kirjaimin ja numeroina muodostettuna merkkijonona, kuten beginPath() ja arc() -menetelmien kutsuminen.

Kun polku määritetään, muut menetelmät, kuten fill(), ovat polun suorittamia toimintoja. Piirtämisympäristön erilaiset ominaisuudet, kuten fillStyle, selittävät, miten nämä toiminnot käytetään.

Huomautus:Canvas API on erittäin tiivis syy, että se ei tarjoa minkäänlaista tukea tekstin piirtämiseen. Tekstin lisääminen <canvas> -grafiikkaan vaatii joko sitä, että se piirretään itsenäisesti ja se yhdistetään bittikuvana, tai CSS -sijoituksen käyttö <canvas> -ympäristön yläpuolella HTML -tekstin peittämiseksi.

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä elementtiä täysin.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0