Koordinater HTML Canvas

Kursrekommendationer:

Canvas-koordinater

HTML canvas är en tvådimensionell rutnät.

Canvas högra övre hörnkoordinaten är (0,0).

Detta innebär: Rita en rektangel med 150x75 pixlar från det övre vänstra hörnet (0,0).

Koordinatexempel

Håll muspekaren över den nedre rektangeln för att se dess x och y-koordinater:

Rita en linje

För att rita en linje på canvas, använd följande metoder:

• moveTo(x,y) - Definiera linjens startpunkt
• lineTo(x,y) - Definiera linjens slutpunkt

För att faktiskt rita en linje måste du använda en av "färg" metoderna, till exempel stroke().

Exempel

Definiera startpunkten vid (0,0) och slutpunkten vid (200,100). Sedan använd stroke() metod för att faktiskt rita linjen:

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

Prova själv

Rita en cirkel

För att rita en cirkel på canvas, använd följande metoder:

• beginPath() - Börja en bana
• arc(x,y,r,startangle,endangle) - Skapa en cirkelbåge/kurva

För att använda arc() för att skapa en cirkel: sätt startvinkeln till 0, och slutvinkeln till 2 * Math.PI. x och y-argument definierar cirkelns x och y-koordinater. r-argument definierar cirkelns radie.

Exempel

Använd metoden arc() för att definiera en cirkel. Sedan använd stroke() metod för att faktiskt ritas cirkeln:

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

Prova själv

Se också:

Komplett Canvas-referenshandbok för CodeW3C.com