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

Criando quadrados de diferentes tamanhos

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por Rodrigo Colucci
| 76.3k xp | 65 posts
Fundador Escola de Celular

Toda vez que eu quiser um quadrado de tamanho diferente eu tenho que criar uma nova função?

Ex: Fiz esse desenho e coloquei o quadrado menor branco dentro do quadrado maior verde

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

<script>



    function desenhaQuadrado(x, y, cor) {

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

    pincel.fillStyle = cor
    pincel.fillRect(x, y, 50, 50)
    pincel.strokeStyle = "black"
    pincel.strokeRect(x, y, 50, 50)

    }

    desenhaQuadrado(700, 300, "green")
    desenhaQuadrado(600, 400, "red")
    desenhaQuadrado(500, 300, "green")

    function quadradoMenor(x, y, cor) {

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

    pincel.fillStyle = cor
    pincel.fillRect(x, y, 20, 20)
    pincel.strokeStyle = "black"
    pincel.strokeRect(x, y, 20, 20)

    }

    quadradoMenor(715, 315, "white")


</script>
3 respostas
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Rodrigo

Você pode deixar a função mais genérica, passando 2 parâmetros a mais, tamanhoX e tamanhoY desenhaQuadrado(100, 200, 'white', 40, 40)

function desenhaQuadrado(x, y, cor, tamanhoX, tamanhoY) {

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

    pincel.fillStyle = cor
    pincel.fillRect(x, y, tamanhoX, tamanhoY)
    pincel.strokeStyle = "black"
    pincel.strokeRect(x, y, tamanhoX, tamanhoY)

    }

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

por Rodrigo Colucci
| 76.3k xp | 65 posts
Fundador Escola de Celular

ah verdade! e como a função sabe que depois da cor é definição de tamanho? é tipo uma regra?

function (eixo x, eixo y, cor, tamanho) {

}

ao invés de tamanhoX e tamanhoY coloquei letra a e b

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

<script>



    function desenhaQuadrado(x, y, cor, a, b) {

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

    pincel.fillStyle = cor
    pincel.fillRect(x, y, a, b)
    pincel.strokeStyle = "black"
    pincel.strokeRect(x, y, a, b)

    }

    desenhaQuadrado(700, 300, "green", 50, 60)
    desenhaQuadrado(600, 400, "red", 80, 90)
    desenhaQuadrado(500, 300, "green", 67, 45)




</script>
solução!
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Rodrigo,

Pode ser a, b sim, mas quanto mais você facilitar para outro desenvolvedor entender o código melhor, se você substituir por exemplo por largura, altura fica mais intuitivo.

Na documentação do fillRect que é em inglês ele informa que é width, height.

https://developer.mozilla.org/pt-BR/docs/Web/API/CanvasRenderingContext2D/fillRect