HTML Canvas koordinater

Kursus anbefaling:

Canvas koordinater

HTML canvas er en to-dimensional gitter.

Canvas' øverste venstre koordinat er (0,0).

Det betyder: Start med at tegne en 150x75 pixels stor rektangel fra øverst til venstre (0,0).

Koordinatseksempel

Placer musen over den nederste rektangel for at se dens x- og y-coordinater:

Tegn en linje

For at tegne en linje på canvas, brug følgende metoder:

• moveTo(x,y) - Definerer linjens start
• lineTo(x,y) - Definerer linjens ende

For at tegne en linje skal du bruge en af "maling"-metoderne, f.eks. stroke().

Eksempel

Definer startpunktet ved (0,0) og slutpunktet ved (200,100). Brug derefter metoden stroke() til faktisk at tegne linjen:

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

Prøv det selv

Tegn en cirkel

For at tegne en cirkel på canvas, brug følgende metoder:

• beginPath() - Starter en sti
• arc(x,y,r,startangle,endangle) - Opretter en cirkelbue/kurve

For at bruge arc() til at oprette en cirkel: Sæt startvinklen til 0, og slutvinklen til 2 * Math.PI. x- og y-parametrene definerer cirkelkernes x- og y-coordinater. r-parametret definerer cirkelens radius.

Eksempel

Brug metoden arc() til at definere en cirkel. Brug derefter metoden stroke() til at faktisk tegne cirklen:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Prøv det selv

Se også:

CodeW3C.com's fulde Canvas reference manual