Canvas API

<canvas>-elementti määrittää bittikarttavyöhykkeen HTML-sivulla.

Canvas API sallii JavaScriptin piirtää kuvioita taululle.

Canvas API voi piirtää muotoja, viivoja, kurvia, laatikoita, tekstiä ja kuvia, sekä värejä, kiertoa, läpinäkyvyyttä ja muita kuvapistemääriä.

Lisää Canvas HTML:ään

Voit lisätä canvas-elementin HTML-sivun mihin tahansa sijaintiin <canvas>-tagin avulla:

Esimerkki

<canvas id="myCanvas" width="300" height="150"></canvas>

Kokeile itse

Miten päästä Canvas-elementtiin

Voit käyttää HTML DOM-metodia getElementById() saadaksesi pääsy <canvas>-elementtiin:

const myCanvas = document.getElementById("myCanvas");

Jos haluat piirtää käsityksessä, sinun on luotava 2D-objekti:

const ctx = myCanvas.getContext("2d");

Huomioitavaa

HTML <canvas>-elementti ei sisällä piirtämismahdollisuuksia.

Sinun on käytettävä JavaScriptiä kaikkien kaavion piirtämisen tarkoituksiin.

getContext()-menetelmä palauttaa objektin, joka sisältää piirtätykaluja (menetelmiä).

Piirrä käsityksessä

Kun olet luonut 2D-objektin, voit piirtää käsityksessä.

Alapuolella oleva fillRect()-menetelmä piirtäät mustan suorakulmion, jonka ylärevasen kulma sijaitsee sijainnissa 20,20. Suorakulmion leveys on 150 pikseliä ja korkeus 100 pikseliä:

Esimerkki

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Kokeile itse

Käytä väriä

fillStyle-ominaisuus asettaa piirtoobjektin täytteen väri.

Esimerkki

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Kokeile itse

Voit lisääätä uuden <canvas>-elementin olemassa olevaan HTML-sivulle document.createElement() -menetelmän avulla:

Esimerkki

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

Kokeile itse

Polku

Yleisimmät tavan täytteisiin käsityksessä on:

1. Aloita polku - beginPath()
2. Siirry pisteeseen - moveTo()
3. Jatka polkua polun sisällössä - lineTo()
4. Jatka polkua - stroke()

Esimerkki

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

Kokeile itse