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

Código simplificado não está imprimindo o resultado no navegador.

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

por Jaqueline Colares Viegas
| 50.8k xp | 21 posts

Quando faço o teste para o código sugerido primeiramente, o esquadro é impresso normalmente no navegador. Mas quando utilizo o código apresentado como melhoria pelo Instrutor, o esquadro não é impresso. No console não apresenta nenhum tipo de erro. O que pode estar acontecendo? Obrigada.

<!-- esquadro.html -->

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

<script>

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

    function desenhaEsquadro(xa, ya, xc, yc, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xc, yc);
        pincel.lineTo(xc, yc);
        pincel.fill();
    }

    desenhaEsquadro(50, 50, 400, 400, "black");
    desenhaEsquadro(100, 175, 275, 350, "white");

</script>
8 respostas
por Ashley Marques De Oliveira
| 51k xp | 11 posts

fill é para áreas, linhas é stroke

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
        tela.style.backgroundColor = "green";
    function desenhaEsquadro(xa, ya, xc, yc, cor) {
        pincel.strokeStyle = cor;
        pincel.lineWidth="3";
        pincel.beginPath();
        pincel.moveTo(xa, ya);
        pincel.lineTo(xc, yc);
        pincel.lineTo(xc, yc);
        pincel.stroke();
    }

    desenhaEsquadro(50, 50, 400, 400, "black");
    desenhaEsquadro(100, 175, 275, 350, "white");
por Jaqueline Colares Viegas
| 50.8k xp | 21 posts

Olá Ashley,

Obrigada por tentar ajudar, porém o código que informou imprime uma figura completamente diferente do esquadro proposto pelo instrutor Flávio. O meu código está igual a melhoria proposta por ele pois praticamente copiei e colei no editor de texto e não entendo porque não é impresso no navegador.

por Rodrigo Oller dos Santos
| 115.1k xp | 13 posts

Olá,

Estou com o mesmo problema, até copiei o código informado pelo instrutor e mesmo assim o esquadro não é impresso. O que poderia ser ?

por Edilene Ribeiro
| 67.9k xp | 27 posts
Bancária

O erro está nas coordenadas dos pontos. O correto é:

function desenhaEsquadro(xa, ya, xc, yc, cor) {

pincel.fillStyle = cor;

pincel.beginPath();

pincel.moveTo(xa, ya);

pincel.lineTo(xa, yc);

pincel.lineTo(xc, yc);

pincel.fill();

}

por Ashley Marques De Oliveira
| 51k xp | 11 posts

Não vi a aula só tentei fazer o desenho funcionar, fazendo a alteração proposta por Edilene apareceu isso:

https://jsfiddle.net/w6Lbss6a/

solução!
por Edilene Ribeiro
| 67.9k xp | 27 posts
Bancária

Segue o código inteiro. Funciona. Eu testei! rs

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

<script>

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

function desenhaEsquadro(xa, ya, xc, yc, cor){

    pincel.fillStyle = cor;
    pincel.beginPath();
    pincel.moveTo(xa, ya);
    pincel.lineTo(xa, yc);
    pincel.lineTo(xc, yc);
    pincel.fill();

}

desenhaEsquadro(50, 50, 400, 400,'black');
desenhaEsquadro(100, 175, 275, 350, 'white');


</script>
por Rodrigo Oller dos Santos
| 115.1k xp | 13 posts

Edilene,

Obrigado, agora funcionou corretamente. O erro estava na linha :

pincel.lineTo(xc, yc);

E o correto é :

pincel.lineTo(xa, yc);

por Jaqueline Colares Viegas
| 50.8k xp | 21 posts

Obrigada, Ashley. Pelo menos valeu a tentativa e a ajuda.

Obrigada, Edilene. Realmente, fiz as alterações sugeridas e o código funcionou imprimindo o esquadro no navegador corretamente.

Que bom que a minha dúvida também pode te ajudar, Rodrigo.