Não entendi muito bem sobre a criação de texto ou círculos, mesmo com o passo a passo explicando em texto acredito que se tivesse mais exemplos em vídeo fixaria mais!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Não entendi muito bem sobre a criação de texto ou círculos, mesmo com o passo a passo explicando em texto acredito que se tivesse mais exemplos em vídeo fixaria mais!
Oi, Cinthya,
Os círculos são feitos de acordo com a fórmula matemática e o texto em si depende muito da função que está sendo definida.
realmente o vídeo seria ideal, tbm não consegui entender
Saudações.
Sobre a criação dos círculos, o código base pra isso estaria abaixo:
function desenhaCirculo(x,y,raio,cor) { //Linha 1
pincel.fillStyle = cor; //Linha 2
pincel.beginPath(); //Linha 3
pincel.arc(x,y,raio,0,2*3.14); //Linha 4
pincel.fill(); //Linha 5
}
desenhaCirculo(300,200,25,"red"); //Linha 6Na linha 1, cria-se a função que vai desenhar o círculo.
Na linha 2 você vai definir a cor que vai preencher o desenho que vai fazer. No caso, a cor "red" vai preencher o círculo.
Na linha 3 você vai iniciar o caminho, posicionar o pincel aonde irá começar o desenho do círculo.
Na linha 4 que acontece o processo de desenho. Em x** e **y você vai definir o centro do círculo, no caso do exemplo 300 e 200. Em raio você vai definir qual será o raio do circulo. as informações 0** e **2x3.14 é a fórmula matemática que descreve o circulo. O processo consiste em traçar uma circunferência de 0 a 360º (ou 2*pi (3.14)).
Na linha 5 o circulo é preenchido com a cor e na linha 6 é que chamamos as funções com os parâmetros desejados.
Para a criação de textos:
function escreveTexto(x, y, texto){
pincel.font = "15px Arial"; //Linha 1
pincel.fillStyle = "black"; //Linha 2
pincel.fillText(texto, x, y); //Linha 3
}Na linha 1 é definido o tamanho da fonte e qual fonte será usada.
Na linha 2 definimos a cor que o texto terá no canvas.
Na linha 3 é desenhado o texto na tela. Você deve inserir nessa função o texto que será exibido entre aspas e as coordenadas aonde você deseja que o texto apareça.
Espero que tenha ajudado. Realmente são códigos simples, acredito que por isso não tenham mais vídeos relacionados.
Att.