Entrar Ainda não tem acesso?
1
resposta

Cheguei neste resultado será que vale?

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 Jeferson Mario Brandão
| 32.5k xp | 13 posts
<canvas width="600" height="400"></canvas>

<script>

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

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

    pincel.fillStyle="black";
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.fill();

    pincel.fillStyle="white";
    pincel.beginPath();
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275, 350);
    pincel.fill();


}

    desenhaEsquadro()
1 resposta
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Fala, Jeferson! Tudo bem contigo?

Nesse cenário, não precisaríamos criar a função esperando por parâmetros 

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

Dessa forma, rodará, mas poderia ser uma função sem parâmetros

function desenhaEsquadro() {

Para construirmos uma função com parâmetros (que acredito que fica até mais interessante), além de construir esses parâmetros da maneira que fez, temos que alterar esses parâmetros no pincel para variáveis e não valores fixos.

Ficando dessa forma:

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

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

    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")

Espero ter ajudado, Jeferson!

Um abraço e bons estudos!!!