Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Como posso melhorar?

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

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!