Entrar Ainda não tem acesso?
2
respostas

Meu creeper

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Desenhando gráficos com Canvas e atividade A cara do Creeper

por Fernanda Araújo
| 116.2k xp | 10 posts
Estagiária Backend 
<canvas width="600", height="400"></canvas>

<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext("2d");
pincel.fillStyle = 'darkgreen';
pincel.fillRect(0,0 ,350,300);

pincel.fillStyle = 'black';
pincel.beginPath();

pincel.fillRect(50,60,90,90);
pincel.fillRect(210,60,90,90);

pincel.fillRect(140,150,70,100);

pincel.fillRect(100,170,40,110);
pincel.fillRect(210,170,40,110);

</script>
2 respostas
por Akemi Alice
| 852.4k xp | 2192 posts
Alura Scuba Team Monitora no Scuba Team

Oi, Fernanda! Tudo bem?

Excelente resolução, mandou muito bem!

Continue praticando. =)

Qualquer dúvida, estamos à disposição!

Abraços e bons estudos!

por Tiago Luiz Alves
| 42.7k xp | 3 posts

Boa Fernanda. Fico feliz que tenha terminado a tarefa. :D

Mas se me permite dar uma dica: Nesse caso, não era necessario utilizar o beginPath, pois ao criar retangulos, vc pode dar a cordenada X,Y onde ele deve ser criado fillRect( cordenada X, cordenada Y, largura, altura);

Nesse caso não interfere em nada o beginPath, mas é sempre uma boa evitar criar linhas de códigos desnecessarias pois em um futuro próximo quando os códigos estiverem maiores, isso pode ajudar a "pesar" o programa :D

Segue meu código:

<canvas width="600" height="400"></canvas>

<script>

 var tela = document.querySelector("canvas");
 var pincel = tela.getContext("2d");

 pincel.fillStyle = "darkgreen";
 pincel.fillRect(0,0,350,300);

 pincel.fillStyle = "black"
 pincel.fillRect(50,50,90,90);
 pincel.fillRect(210,50,90,90);
 pincel.fillRect(140,140,70,100);  
 pincel.fillRect(100,190,40,110);
 pincel.fillRect(210,190,40,110);
    </script>