Entrar Ainda não tem acesso?
1
resposta

Como posso melhorar?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Frações

por DIEGO ARAÚJO SIMÕES DE MELO
| 68.2k xp | 5 posts

Minha ideia foi repetir os quadrados e depois desenhar a borda.

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

<script type="text/javascript">

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

function desenhaQuadrado(x, y, cor){

    pincel.fillStyle = 'green';
    pincel.fillRect(x, y, 50, 50);

    pincel.fillStroke =' black';
    pincel.strokeRect(x, y, 50, 50);
}

function desenhaTexto(texto, x , y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font = '14px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y);
}

desenhaTexto('Qual é a fração?', 10, 20);

for(x = 0; x < 150; x = x + 50){
    desenhaQuadrado(x, 50, 50);

}
pincel.strokeRect(150, 50, 50, 50);

</script>
1 resposta
por Cássio Murilo
| 1276.5k xp | 2204 posts
Instrutor Agile Master

Fala, Diego!!! Tudo bem, contigo? Espero que sim!!!

Bacana compartilhar seu código conosco!!!

Podemos fazer algumas alterações. Vamos lá!

Podemos fazer com que na sua função desenhaQuadrado possa fazer o quadrado e a borda ao mesmo tempo, por exemplo, e economizaríamos o for no final do seu código ;-)

Vamos começar do mesmo jeito

function desenhaQuadrado(x, y, cor) {

Dentro do for eu estipulo meu contador, que enquanto esse contador for menor que a quantidade de quadrados pintados vezes 100 (tamanho que vai influenciar na quantidade se alterado) e esse contator seja somado para gerar o próximo quadrado (mas estipulei somente 1 para colorir)

for (var contador = 0; contador < 1 * 100; contador = contador + 100) {

Pintaremos com a cor escolhida e executaremos os parâmetros do for

      pincel.fillStyle = cor;
      pincel.fillRect(x + contador, y, 100, 100);

Agora vamos para o total de quadrados (ou bordas). Vamos estipular 4. Segue a mesma sequencia do anterior

for (var contador = 0; contador < 4 * 100; contador = contador + 100) {

Damos formas a elas

      pincel.strokeStyle = 'black';
      pincel.strokeRect(x + contador, y, 100, 100);

Essa parte completa ficará dessa forma

  function desenhaQuadrado(x, y, cor) {

    for (var contador = 0; contador < 1 * 100; contador = contador + 100) {

      pincel.fillStyle = cor;
      pincel.fillRect(x + contador, y, 100, 100);

    }

    for (var contador = 0; contador < 4 * 100; contador = contador + 100) {

      pincel.strokeStyle = 'black';
      pincel.strokeRect(x + contador, y, 100, 100);

    }

  }

No final, a única alteração seria essa

desenhaQuadrado(50, 50, 'purple');

Coloquei roxa, mas poderia ser qualquer outra rs

Tente realizar essa modificações e nos retorne para eu saber se deu tudo certo!!! \o/

Bons estudos, Diego!!!

Um abraço e até breve!