Coordenadas da tela HTML
Coordenadas da tela
A tela HTML é uma grade bidimensional.
O canto superior esquerdo da tela tem as coordenadas (0,0)
No capítulo anterior, você viu este método usado: fillRect(0,0,150,75).
Isso significa: Comece no canto superior esquerdo (0,0) e desenhe um retângulo de 150x75 pixels.
Exemplo de coordenadas
Passe o mouse sobre o retângulo abaixo para ver suas coordenadas x e y:
Desenhe uma linha
Para desenhar uma linha reta em uma tela, use os seguintes métodos:
- moveTo( x,y ) - define o ponto inicial da linha
- lineTo( x,y ) - define o ponto final da linha
Para realmente desenhar a linha, você deve usar um dos métodos "ink", como stroke().
Exemplo
Defina um ponto inicial na posição (0,0) e um ponto final na posição (200,100). Em seguida, use o método stroke() para realmente desenhar a linha:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
Desenhar um círculo
Para desenhar um círculo em uma tela, use os seguintes métodos:
- beginPath() - inicia um caminho
- arc(x,y,r,startangle,endangle) - cria um arco/curva. Para criar um círculo com arc(): Defina o ângulo inicial como 0 e o ângulo final como 2*Math.PI. Os parâmetros xey definem as coordenadas xey do centro do círculo. O parâmetro r define o raio do círculo.
Exemplo
Defina um círculo com o método arc(). Em seguida, use o método stroke() para realmente desenhar o círculo:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();