Entrar Ainda não tem acesso?
1
resposta

[Projeto] Assim ficou meu projeto, até a então aula.

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Desenhando com o mouse

por João de Azevedo Lima Neto
| 27.4k xp | 1 posts

Paint improvisado

<script>

    function mostra(text) {
        document.write(text)
    }

    function vermelho() {

        pincel.fillStyle = "red";
        pincel.fillRect(330, 740, 10, 10);


    }
    function verdao() {

        pincel.fillStyle = "green";
        pincel.fillRect(400, 740, 10, 10);
    }

    function branco() {

        pincel.fillStyle = "white";
        pincel.fillRect(250, 740, 10, 10);
        pincel.fillStroke = "black"
        pincel.strokeRect(250, 740, 10, 10)

    }
    function azul() {

        pincel.fillStyle = "blue";
        pincel.fillRect(470, 740, 10, 10);

    }



    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "black";
    pincel.fillRect(0, 0, 1280, 720);
    var cores = ["white", "red", "green", "blue"];
    var indiceCorAtual = 0;
    var raio = 10;

    function desenhaCircle(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if (desenha) {
            pincel.fillStyle = cores[indiceCorAtual]
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14)
            pincel.fill();
        }
        if (event.ctrlKey && raio - 5 >= 10) {
            raio = raio - 10;
        }

        if (evento.shiftKey && raio + 10 <= 60) {

            raio = raio + 10; // raio agora passa a valer 30!
        }
    }




    function mudaCor() {
        indiceCorAtual++;
        if (indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // volta para a primeira cor, azul
        }
        return false; // para não exibir o menu padrão do canvas
    }
    tela.oncontextmenu = mudaCor;

    function pincelAtivado() {
        desenha = true
    }
    function pincelDesativado() {
        desenha = false
    }
    tela.onmouseup = pincelDesativado
    tela.onmousemove = desenhaCircle
    tela.onmousedown = pincelAtivado



    vermelho();
    verdao();
    branco();
    azul();
    mostra("<br>")
    mostra("ESCOLHA AS CORES ENTRE BRANCO, VERMELHO, VERDE E AZUL PRESSIONANDO O BOTÃO DIREITO DO MOUSE!")
</script>
1 resposta
por RODRIGO SILVA HARDER
| 2302.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, João, tudo bem?

Muito obrigado por compartilhar a sequência lógica que você utilizou para responder a esta atividade. Tenho certeza que vai contribuir com outros alunos e alunas que estão estudando o mesmo assunto.

Gostaria de ressaltar apenas um detalhe, ao testar o seu código, a mensagem de erro que aparece no console do navegador diz que a variável "desenha" não foi definida. Isso ocorre pois, ao utilizar essa variável na estrutura condicional ifdentro da função desenhaCircle(evento) e nas funções pincelAtivado() e pincelDesativado() não definimos esta variável em nenhum lugar no escopo do nosso projeto.

Podemos solucionar esse problema criando a variável desenha e alterando o parâmetro colocado na estrutura condicional, de modo que o resultado seria o seguinte:

var desenha = false;
 if (desenha==true){
            pincel.fillStyle = cores[indiceCorAtual]
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14)
            pincel.fill();
        }

Desse modo, a variável desenha recebe o valor false, que faz com que ela não execute nenhuma ação. A partir do momento em que desenha for igual a true, ou seja, no momento em que o mouse for clicado com lado esquerdo, o pincel começará a imprimir na tela.

Continue se dedicando em seus estudos para aprimorar ainda mais suas habilidades e desenvolver seus conhecimentos.

Espero ter ajudado, e caso tenha dúvidas, estarei à disposição!

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!