Canvas API

<canvas>-elementet definierar en bitmap-område i HTML-sidan.

Canvas API tillåter JavaScript att rita grafik på canvas.

Canvas API kan rita former, linjer, kurvor, rutor, text och bilder, samt färg, rotation, transparens och andra pixeloperationer.

Lägg till Canvas till HTML

Du kan lägga till canvas-elementet i HTML-sidan på vilket som helst ställe med <canvas>-tagget:

Exempel

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

Prova själv

Hur man komma åt Canvas-elementet

Du kan använda HTML DOM-metoden getElementById() för att komma åt <canvas>-elementet:

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

För att rita på canvas måste du skapa ett 2D-ritkontextobjekt:

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

Anteckningar

HTML <canvas>-elementet har inga ritfunktioner.

Du måste använda JavaScript för att rita alla图形.

getContext()-metoden returnerar ett objekt med ritverktyg (metoder).

Rita på canvas

Efter att ha skapat 2D-ritkontexten kan du rita på canvas.

Nedan har fillRect()-metoden ritat en svart rektangel, med övre vänstra hörnet vid position 20,20. Rektangelns bredd är 150 pixlar, höjden 100 pixlar:

Exempel

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

Prova själv

Använd färg

fillStyle-attributet ställer in färgen för fyllningen av ritobjektet:

Exempel

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

Prova själv

Du kan också använda document.createElement() för att skapa ett nytt <canvas>-element och lägga till det i den befintliga HTML-sidan:

Exempel

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

Prova själv

Väg

En vanlig metod för att rita på canvas är:

1. Börja med en bana - beginPath()
2. Flytta till en punkt - moveTo()
3. Rita i banan - lineTo()
4. Rita en bana - stroke()

Exempel

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();

Prova själv