canvas Coordenadas
A tela HTML é uma grade bidimensional.
O canto superior esquerdo da tela tem as coordenadas (0,0)
No capítulo anterior, você viu esse método utilizado: fillRect(0,0,150,75) .
Isso significa que: Comece no canto superior esquerdo (0,0) e desenhe um retângulo 150x75 pixels.
coordenadas Exemplo
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 traçar a linha, você deve usar um dos "ink" métodos, como stroke() .
Exemplo
Definir um ponto de partida na posição (0,0) , e um ponto final na posição (200,100) . Em seguida, use o stroke() método 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(); Tente você mesmo " Desenhar um círculo
Para desenhar um círculo em uma tela, use os seguintes métodos:
- beginPath() - começa um caminho
- arc(x,y,r,startangle,endangle) - cria um arco / curva. Para criar um círculo com arc() : Set começar ângulo a 0 e ângulo final a 2 * Math.PI. Os parâmetros xe y definir o xey coordenadas do centro do círculo. O parâmetro r define o raio do círculo.
Exemplo
Definir um círculo com o arc() método. Em seguida, use o stroke() método 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(); Tente você mesmo "