HTML DOM Canvas objekt

<canvas>-elementet definierar en bitmappsområ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-element med <canvas>-taggen på valfri plats i HTML-sidan:

Exempel

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

Prova själv

Hur man kommer å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- kontextobjekt:

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

Anteckningar

HTML <canvas>-elementet har ingen ritfunktion.

Du måste använda JavaScript för att rita några grafiska element.

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

Rita på canvas

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

Nedan har fillRect() -metoden ritat en svart rektangel, whose översta vänstra hörn ligger på position 20,20. Rektangelns bredd är 150 pixlar, och höjden är 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 -egenskapen ställer in fyllningsfärgen för 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() -metoden för att skapa ett nytt <canvas>-element och lägga till detta element 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å en canvas är:

1. Börja en väg - beginPath()
2. Flytta till en punkt - moveTo()
3. Rita i en väg - lineTo()
4. Rita en väg - 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