HTML DOM Canvas-objekti

<canvas>-elementti määrittää bittikartta-alueen HTML-sivulla.

Canvas API sallii JavaScriptin piirtää kuvioita lavoille.

Canvas API voi piirtää muotoja, viivoja, kurveja, 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äksesi Canvas-elementtiin

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

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

Jos haluat piirtää taululle, sinun täytyy luoda 2D-ala-objekti:

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

Huomioitavaa

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

Sinun täytyy käyttää JavaScriptiä piirtääksesi mitään grafiikkaa.

getContext() -menetelmä palauttaa objektin, joka sisältää piirtotyökaluja (menetelmiä).

Piirtäminen taululle

Kun olet luonut 2D-ala-objektin, voit piirtää taululle.

Alla oleva fillRect() -menetelmä piirtää mustan suorakulmion, jonka yläkulma sijaitsee sijainnissa 20,20. Tämä suorakulmio on leveä 150 pikseliä ja korkea 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 piirtämisen täyttö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 myös luoda uuden <canvas> -elementin document.createElement() -menetelmällä ja lisätä sen olemassa olevaan HTML-sivulle:

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

路径

Yleisimmät tapat piirtää taululle:

1. Aloita polku - beginPath()
2. Siirry kohtaan - moveTo()
3. Piirrä polkuun - 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