Dúvida sobre laços no capítulo extraindo funções | Lógica de Programação II: Funções, Desenhos e um Jogo

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Vinicius Weiss Cobos

| 176.2k xp | 9 posts

Tentei criar um código para preencher todo o espaço do canvas com o padrão apresentado no exercício 4 da aula extraindo funções porém não funcionou e não consigo achar qual é o erro. Alguém consegue visualizar? Segue o código:

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

<script>

var desenhaQuadradoVerde = function(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "green";
    c.fillRect(x,y,50,50);

    c.strokeStyle = "black";
    c.strokeRect(x,y,50,50);
}

var desenhaQuadradoVermelho = function(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "red";
    c.fillRect(x,y,50,50);

    c.strokeStyle = "black";
    c.strokeRect(x,y,50,50);
}

var desenhaCirculoAzul = function(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x,y,25,0,2*Math.PI);
    c.fill();
}


var y=0;
var controle = 1;

while(y<400){

    var x=0;

    while(x<600){

        if(controle == 1){
            desenhaQuadradoVerde(x,y);
        } 

        else {
            desenhaQuadradoVermelho(x,y);
        }

        x = x + 50;
    }

    x = 0;

    while(x<600 || y == 400){
        if(controle == 1){
            desenhaCirculoAzul(x,y);
            x = x + 50;
        }
    }
    controle = controle*(-1);
    y = y + 50;
}

</script>

3 respostas

por TAMARA DIAS DE ASSIS

| 104.6k xp | 4 posts

20/09/2016

definindo a altura (y) fixa, usei apenas a escala da largura (x) dentro do laço e consegui alcançar o desenho igual ao do exercício.

<!DOCTYPE html>
<html>
<body>

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

<script>
var desenhaQuadradoVerde = function(x,y) {
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle="green";
    c.fillRect(x, y, 50, 50);

    c.strokeStyle = "black";
    c.strokeRect(x,y,50,50);
}

var desenhaQuadradoVermelho = function(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "red";
    c.fillRect(x,y,50,50);

    c.strokeStyle = "black";
    c.strokeRect(x,y,50,50);
}

var desenhaCirculoAzul = function(x,y){
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x,y,25,0,2*Math.PI);
    c.fill();
}

var x = 0;
while(x < 600) {
    desenhaQuadradoVerde(x, 0);
    desenhaQuadradoVermelho(x, 50);
    desenhaQuadradoVermelho(x, 50);
    desenhaCirculoAzul(x+25,100)
    x = x + 50; 
}
</script>
</script>

</body>
</html>

solução!

por Maison Galvão

| 1029.1k xp | 1128 posts

Moderador Desenvolvedor de Sistemas

26/09/2016

Oi Vinicius, você precisa dominar melhor como desenhar no Canvas primeiro observe que x = largura e y = altura. Não consegui entender o que você quis fazer nesse trecho:

while(y<400){

    var x=0;

    while(x<600){

        if(controle == 1){
            desenhaQuadradoVerde(x,y);
        } else {
            desenhaQuadradoVermelho(x,y);
        }

        x = x + 50;
    }

    x = 0;

    while(x<600 || y == 400){
        if(controle == 1){
            desenhaCirculoAzul(x,y);
            x = x + 50;
        }
    }
    controle = controle*(-1);
    y = y + 50;
}

Temos várias estruturas umas dentro das outras e elas não estão incrementando da forma correta e não entendo a função da variável controle. Comente no seu código a função das suas variáveis, melhor renomeie elas de forma que fique melhor identificar quem elas são no Canvas. Isso vai lhe ajudar a desenvolver melhor a lógica necessária para desenhar o que e exatamente onde vc quer no Canvas. Segue um exemplo:

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

    <script>

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

    var desenhaQuadrado = function(largura,altura,cor) {
        pincel.fillStyle=cor;
        pincel.fillRect(largura, altura, 50, 50);
        pincel.strokeStyle="black";
        pincel.strokeRect(largura, altura, 50, 50);
    };

    var desenhaBolas = function(largura,altura,cor){
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(largura,altura,25,0,2*Math.PI);
        pincel.fill();
    }

    for(var largura = 0; largura < 600; largura = largura + 50) {
        desenhaQuadrado(largura, 0, "green");
        desenhaQuadrado(largura, 50,"red");
    }

    for(var largura = 25; largura <= 600; largura = largura + 50) {
        desenhaBolas(largura, 100, "blue");
    }

    </script>

por Maison Galvão

| 1029.1k xp | 1128 posts

Moderador Desenvolvedor de Sistemas

16/10/2016

Oi Vinicius você conseguiu resolver essa questão. Não deixe de nos avisar.