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

eu tentei algo mas não funcionou

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 Daniel Moreira Silva
| 111k xp | 39 posts
z<canvas width="600" height="400"></canvas>

<script>

    //  alert ("escolha as suas cores em ingês")
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    //var telaCor = prompt("escolha a cor da tela");
    // var pincelCor = prompt("escolha a cor do pincel");

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


    var desenha = false

    function desenhaCirculo(evento) {

        if (desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = 'red';
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();

        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    function pintar() {

        desenha = true
    }

    function naoPintar() {

        desenha = false
    }

        // Botão direito precionado
    tela.onmousedown = pintar
        // Botaõ direito não precionado
    tela.onmouseup = naoPintar

</script>

eu tentei colocar tipo uma escolha para o usuário escolher a cor da tela e a cor do pincel mas ão deu certo o que eu fiz de errado ou melhor o que ficou faltando a sim eu coloquei eles no "//"

3 respostas
por Geovani Granieri
| 909.1k xp | 1038 posts
Instrutor

Olá Daniel, tudo bem com você?

Faltou apenas você passar a cor escolhida, no caso você apenas salvou as cores nas variáveis mas você nunca especificou que era para utilizar elas, vou te mostrar como fazer isso, ok?

  • Primeiramente vamos tirar os comentários porque está certinho
  • Agora vamos fazer 2 pequenas mudanças em algumas partes do código 
pincel.fillStyle = telaCor;

    function desenhaCirculo(evento) {

        if (desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = pincelCor;
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();

        }
        console.log(x + ',' + y);
    }

Veja que na primeira linha eu estou atribuindo a fillStyle a cor que você está perguntando no prompt (telaCor), e também, na função desenhaCirculo o pincel.fillStyle estou atribuindo a variável pincelCor, dessa forma após o usuário escolher as opções irá funcionar corretamente ;)

Qualquer coisa estou a disposição!

Abraços e Bons Estudos!

solução!
por Cássio Murilo
| 1276.7k xp | 2204 posts
Instrutor Agile Master

Fala, Daniel! Tudo bem? Espero que sim!!!

Bacana sua ideia!

Vamos lá!

Pode colocar um prompt pedindo a cor da tela:

pincel.fillStyle = prompt("Qual cor (em inglês) da tela você prefere?");

Também podemos colocar uma variável para pedir a cor do pincel:

var cor = prompt("Qual cor (em inglês) do pincel você prefere?");

Não esqueça de alterar dentro do if:

pincel.fillStyle = cor;

Agora é só rodar!

Segue o código completo:

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

<script>

    //  alert ("escolha as suas cores em ingês")
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    //var telaCor = prompt("escolha a cor da tela");
    // var pincelCor = prompt("escolha a cor do pincel");

    pincel.fillStyle = prompt("Qual cor (em inglês) da tela você prefere?");
    pincel.fillRect(0, 0, 600, 400);


    var desenha = false

    var cor = prompt("Qual cor (em inglês) do pincel você prefere?");

    function desenhaCirculo(evento) {

        if (desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cor;
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();

        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    function pintar() {

        desenha = true
    }

    function naoPintar() {

        desenha = false
    }

        // Botão direito precionado
    tela.onmousedown = pintar
        // Botaõ direito não precionado
    tela.onmouseup = naoPintar

</script>

Espero ter ajudado, Daniel!!!

Bons estudos e vamos em frente!!!

por Daniel Moreira Silva
| 111k xp | 39 posts

ajudou sim obrigado por sanar as minhas duvidas !!!!!