HTML Canvas Coordonate

Canvas coordonate

Pânza HTML este o grilă bidimensional.

Colțul din stânga sus al pânzei are coordonatele (0,0)

În capitolul anterior, ați văzut această metodă folosită: fillRect(0,0,150,75) .

Aceasta înseamnă: Start în colțul din stânga sus (0,0) și a desena un dreptunghi 150x75 pixeli.

Mouse-ul peste dreptunghiul de mai jos pentru a vedea x și y coordonatele:

Pentru a desena o linie dreaptă pe o pânză, utilizați următoarele metode:

Pentru a desena linia, trebuie să utilizați una dintre "ink" metode, cum ar fi stroke() .

Definirea unui punct de pornire în poziția (0,0) , și un punct final în poziția (200,100) . Apoi , utilizați stroke() metoda pentru a desena linia:

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

Pentru a desena un cerc pe o pânză, utilizați următoarele metode:

beginPath() - începe o cale
arc(x,y,r,startangle,endangle) - creează un arc / curba. Pentru a crea un cerc cu arc() : Set Unghi de start la 0 și unghiul de capăt 2 * Math.PI. X si y parametrii definesc coordonatele x și y ale centrului cercului. Parametrul r definește raza cercului.

Definiți un cerc cu arc() metoda. Apoi , utilizați stroke() metoda pentru a trage de fapt cerc:

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