Entrar Ainda não tem acesso?
2
respostas

[Não é uma dúvida] Alternativa com cálculo automático (e simples) da espessura da borda

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 Nathalia C. C. M. Carvalho
| 89.7k xp | 21 posts
Consultora em estratégia de negócios

Pelo que entendi, a solução do exercício considerou o cálculo da espessura da borda.

Apesar deste não ter sido meu raciocínio inicial, trabalhei em uma alternativa que simplifique as alterações,

Seria uma opção mais simples pois poderia alterar medidas do triângulo e da espessura da borda em apenas 1 linha:

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

<script>

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

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

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

        pincel.fillStyle = 'white',
        pincel.beginPath ();
        pincel.moveTo (xa+(2*espessura),ya+(5*espessura));
        pincel.lineTo(xa+(2*espessura),yc-(2*espessura));
        pincel.lineTo(xc-(5*espessura),yc-(2*espessura));
        pincel.fill();

    }

    desenhaEsquadro(100,100,350,350,'black', 20);

</script>

A princípio, pra mim, deu certo com diversas medidas.

Testem e me contem se deu certo...

2 respostas
por Michel Alisson Barbosa Da Silva
| 148.4k xp | 13 posts

Boa noite, Nathalia! O seu código ficou muito interessante, e fácil interpretação. Parabéns!!

Usei sua lógica, utilizando o valor 25 como espessura, para condizer com as condições do exercício, e ficou assim... 

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

<script type="text/javascript">

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

    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);

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

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

    pincel.fillStyle = 'white',
    pincel.beginPath ();
    pincel.moveTo (xa+(2*espessura),ya+(5*espessura)); // **Resultado esperado: 100 , 175 **-> (50 + (2*25)), (50 + (5*25))  
    pincel.lineTo(xa+(2*espessura),yc-(2*espessura)); // **Resultado esperado: 100, 350** -> (50 + (2*25)), (400-(2*25))
    pincel.lineTo(xc-(5*espessura),yc-(2*espessura)); // **Resultado esperado: 275, 350 **-> (400-(5*25)), (400-(2-25))
    pincel.fill();

}
    desenhaEsquadro(50, 50, 400, 400, 'black', 25);

</script>
por Samuel Wesley Camelo
| 126.6k xp | 19 posts

Olá, Muito interessante o jeito que tu fez, Nathalia. Eu deixei o valor fixo, vou deixar meu código aqui caso você ou alguém queira comparar. Eu sempre uso cores mais fracas porque sempre estudo à noite.

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

<script>

var tela = document.querySelector("canvas"); //atribuindo a tela a uma variável
var pincel = tela.getContext('2d'); //criando o pincel 


function desenhaTexto(x,y,texto){

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

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

    pincel.fillStyle="#e4ebf0" //cor do canvas
    pincel.fillRect(0,0,600,400); //coordenadas do retangulo que "pinta" o canvas

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

    pincel.fillStyle="#e4ebf0";
    pincel.beginPath(xa+50,ya+125);
    pincel.lineTo(xa+50,yc-50);
    pincel.lineTo(xc-125,yc-50);
    pincel.lineTo(xa+50,ya+125);
    pincel.fill();

}