Canvas-elementti

Wikipediasta
Siirry navigaatioon Siirry hakuun

Canvas-elementti on HTML5-päivityksen mukana tullut ominaisuus, jota käytetään grafiikoiden piirtämiseen verkkosivuille JavaScriptin avulla[1]. Canvas mahdollistaa vektoripohjaisten grafiikoiden ja animaatioiden luomisen suoraan verkkosivulle ilman erillisiä lisäosia. Canvas-elementti on erityisen hyödyllinen interaktiivisten sovellusten, kuten pelien, visualisointien ja piirto-ohjelmien kehittämisessä.

Perusominaisuudet

[muokkaa | muokkaa wikitekstiä]

Canvas-elementti määritellään HTML5-dokumentissa <canvas>-tagilla, johon voi liittää leveys- ja korkeusarvot. Oletusarvoisesti canvas on 300 pikseliä leveä ja 150 pikseliä korkea, mutta sen kokoa voidaan muokata tarpeen mukaan[2].

Esimerkki canvas-elementin luonnista:

<canvas id="minunCanvas" width="500" height="400"></canvas>

Piirtäminen canvakselle

[muokkaa | muokkaa wikitekstiä]

Canvas-elementin sisältöä voidaan hallita JavaScriptin avulla. Piirtäminen alkaa viittaamalla canvas-elementtiin ja sen 2D-piirtokontekstiin:

var canvas = document.getElementById('minunCanvas');
var context = canvas.getContext('2d');

Tämän jälkeen kontekstia voidaan käyttää erilaisten piirto-operaatioiden suorittamiseen, kuten suorakulmioiden, ympyröiden ja viivojen piirtämiseen sekä kuvien renderöintiin.

Esimerkkinä punaisen suorakulmion piirtäminen:

context.fillStyle = "#FF0000";
context.fillRect(30, 30, 50, 50);

Edistyneet ominaisuudet

[muokkaa | muokkaa wikitekstiä]

Canvas tukee myös edistyneempiä grafiikkatekniikoita, kuten liukuvärejä, kuvioita, muunnoksia ja kompositointia. Lisäksi canvaksen sisältöä voidaan muokata pikselitasolla, mikä mahdollistaa monimutkaiset kuvanmuokkaustoiminnot.

Esimerkkinä, kuinka piirretään canvakselle 500x400 pikselin sinisen ympyrän vihreällä reunuksella:

context.beginPath();
context.arc(250, 200, 100, 0, 2 * Math.PI, false); // x, y, säde, alkukulma, loppukulma
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();

Yhteensopivuus ja suorituskyky

[muokkaa | muokkaa wikitekstiä]

Canvas-elementtiä tukevat kaikki modernit selaimet, kuten Google Chrome, Firefox, Safari, Opera ja Microsoft Edge[2]. Suorituskyky on yleensä hyvä, mutta monimutkaisissa animaatioissa ja suurilla piirtomäärillä on suositeltavaa optimoida koodia ja käyttää tehokkaita piirtoalgoritmeja[3].

  1. HTML Canvas www.w3schools.com. Viitattu 31.7.2024. (englanti)
  2. a b : The Graphics Canvas element - HTML: HyperText Markup Language | MDN developer.mozilla.org. 26.7.2024. Viitattu 31.7.2024. (englanti)
  3. Improving HTML5 Canvas performance | Articles web.dev. Viitattu 31.7.2024. (englanniksi)