1
resposta

Duvida sobre o ".fill"

Decerto que, "fill" signifique preencher, mas ao utilizarmos podemos aplica-lo em mais de uma função como, por exemplo: .fillStyle e .fillRect. A duvida é, podemos utiliza-lo de mais alguma forma e qual seria o pensamento correto para a sua utilização?

1 resposta

Oi Matheus, tudo bem?

Obrigado pela paciência em aguardar um retorno!

Como você bem colocou, a palavra fill, em português, significa preencher. Nesse sentido essa propriedade irá preencher as figuras.

Durante o curso serão muito utilizados três métodos que possuem fill no nome, são eles: fillStyle, fillRect() e fill().

O primeiro método (fillStyle) está relacionado a cor, por isso possui a palavra Style - ou estilo, em português.

pincel.fillStyle = 'lightblue';

Perceba que está sendo atribuído ao pincel uma cor de preenchimento (fillStyle). É importante mencionar que todos os códigos escritos após essa linha terão a coloração azul clara, a menos que essa propriedade seja alterada com outra cor, ou interrompida.

O segundo método (fillRect()) traz a ideia de preencher uma forma geométrica, especificamente um polígono de quatro lados, que pode ser um retângulo ou um quadrado. Normalmente seu uso está associado com o estilo de cor adotado pelo pincel, em consequência disso a propriedade fillStyle estará presente.

 pincel.fillStyle = 'lightblue';
 pincel.fillRect(0,0, 600, 400);

É possível notar que dentro da propriedade fillRect() são atribuídos alguns parâmetros que devem ser comentados:

 fillRect(x, y, width, height)

Os dois primeiros são referentes aos pontos iniciais na coordenada cartesiana “x” e “y”, ou seja: onde o pincel irá começar o desenho. O terceiro parâmetro diz respeito ao comprimento do quadrilátero e o último está relacionado à altura da figura geométrica.

Já o terceiro método (fill()) está associado ao preenchimento de outros tipos de formas geométricas, como um triângulo ou um círculo.

Ao desenhar um triângulo, por exemplo, é preciso utilizar algumas outras propriedades que definem que um desenho será feito (beginPath), posicionam o pincel (moveTo()) e que desenham linhas (lineTo). Após todo o contorno ser delimitado pelas respectivas propriedades é aplicado então ao final dos comandos a fill() que irá preencher o que foi desenhado.

pincel.fillStyle = 'purple';
pincel.beginPath();
pincel.moveTo(300, 200);
pincel.lineTo(200,400);
pincel.lineTo(400,400);
pincel.fill();

Note que a propriedade de estilo de cor (fillStyle) também está presente, mas lembre-se que ela apenas define a cor com a qual o desenho será pintado, quem realmente realiza o preenchimento da forma geométrica é a última linha do código mencionado acima (pincel.fill()).

Ao longo do primeiro módulo o instrutor irá explorar essas três formas de utilizar essa propriedade de preenchimento e com a ajuda dos exercícios você poderá explorar ainda mais o uso de cada um desses métodos.

Espero ter ajudado com sua dúvida. Caso surjam outras, estarei à disposição para te auxiliar!

Grande abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.