Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

fillRect ou rect

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo, no capítulo Desenhando gráficos com Canvas e atividade Duas bandeiras

por Anderson Souza da Gama
| 66.6k xp | 4 posts
Analista de Sistemas Sênior

Olá, estou com uma dúvida em relação ao rect.

Quando eu uso o "fillRect" não consigo adicionar borda no retangulo usando o "stroke". Para isso tive que utilizar o "rect" e depois disso chamar o método "fill" e o método "stroke", assim como o exemplo:

//Bandeira de Madagascar
c.fillStyle = "#FFFFFF";
c.strokeStyle = "black";
c.fillRect(0,500,200,400);
c.fill();
c.stroke();

c.fillStyle = "#FF6347";
c.strokeStyle = "black";
c.rect(200,500,400,200);
c.fill();
c.stroke();

c.fillStyle = "#006400";
c.rect(200,700,400,200);
c.fill();
c.stroke();

A princípio funciona muito bem para um retangulo apenas, no caso do primeiro ele imprime um retângulo de cor branca e bordas pretas, porém, quando o segundo retângulo é desenhado e o "fillStyle" é trocado para uma nova cor da bandeira, o primeiro retângulo também muda sua cor de preenchimento. O mesmo vale para o terceiro, no fim todos ficam com a mesma cor. Já o "fillRect" permanece com cor inalterável, porém o "stroke" não funciona nele. Por que?

2 respostas
por Anderson Souza da Gama
| 66.6k xp | 4 posts
Analista de Sistemas Sênior

Pessoal, acabei colando o código errado no tópico, segue abaixo o código correto da dúvida:

//Bandeira de Madagascar
c.fillStyle = "#FFFFFF";
c.strokeStyle = "black";
c.rect(0,500,200,400);
c.fill();
c.stroke();

c.fillStyle = "#FF6347";
c.strokeStyle = "black";
c.rect(200,500,400,200);
c.fill();
c.stroke();

c.fillStyle = "#006400";
c.strokeStyle = "black";
c.rect(200,700,400,200);
c.fill();
c.stroke();
solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Anderson! Como vai?

De acordo com a documentação da API de canvas, o método rect apenas cria um retângulo sem desenhar ele efetivamente, o que só será feito quando os métodos fill ou stroke forem usados.

Enquanto isso, os métodos fillRect e strokeRect já desenham o retângulo na tela, apenas com preenchimento e apenas com borda, respectivamente. Usando esses métodos, é necessário que sejam definidas as cores de preenchimento ou de borda antes de efetivamente desenhar o retângulo. Além disso, não é possível adicionar borda num retângulo que possui apenas preenchimento (fillRect) e também não é possível adicionar preenchimento num retângulo que apenas possui borda (strokeRect).

Por isso, no seu caso, é necessário o uso do rect.

Dica: Sempre que tiver dúvidas em relação ao uso correto de propriedades e/ou métodos (seja em que ambiente for), procure pelos materiais de referência ou respectivas APIs. Nesse caso específico do seu problema, API de canvas. Essa é uma dica que é muito útil para todos os desenvolvedores!

Grande abraço!