Entrar Ainda não tem acesso?
1
resposta

Diferença de pincel.fillStroke e pincel.strokeStyle = 'red';

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Uma função mais genérica

por Flavio R. Tiezzi Junior
| 45.7k xp | 6 posts
<canvas width="600" height="400"></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.fillStroke = 'black';
        //pincel.strokeStyle = 'red';
        pincel.strokeRect(x, y, 50, 50);

    }


    desenhaQuadrado(0, 0, 'green');
    desenhaQuadrado(50, 0, 'green');
    desenhaQuadrado(100, 0, 'green');



</script>

Boa Noite! Fiquei em dúvida em relação ao uso de fillStroke e strokeStyle. Pode ser usado um ou outro?

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

Fala, Flávio! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Acredito que seja um erro, pois na documentação não existe fillStroke, mas sim o strokeStylecomo também o fillStyle. Dê uma olhada na documentação nesse link

O fillStyleé responsável pelas cores e estilos dentro dos formatos, enquanto o strokeStyleé usado para as linhas que contornam esse formato.

Por padrão, a cor preta já é adicionada sem precisar do strokeStyle. Se comentarmos os dois, nada altera em relação a borda. Ela permanecerá na cor preta.

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.fillStroke = 'black';
    // pincel.strokeStyle = 'red';
    pincel.strokeRect(x, y, 50, 50);

}

Espero ter ajudado, Flávio!

Obrigado por ter levantado essa questão!!!

Vou levar isso para a equipe!!!

Um abraço e bons estudos!