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

Quero uma dica para completar meu código de pintar a tela

por Vinícius Guimarães Santos
| 53k xp | 7 posts

1º - Quero poder mudar a cor do canvas de dentro do navegador, mas não sei como posso fazer isso.

2º - Quero uma dica para resumir o código no final que compara se cliquei com o mouse para poder desenhar arrastando o mouse 

<meta charset="utf-8">

<canvas width="600" height="400"></canvas>
<br>
Escolha a cor do pincel <input type="color" name="corDoPincel">
<br>
Escolha a cor da tela <input type="color" name="corDaTela"> 
/* não sei ainda como escolher a cor da tela */

<script type="text/javascript">

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

    var arrastar = false;

    var raio = 10;

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

    function desenhaCirculo(evento) {

        if(arrastar) {

            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;

            pincel.fillStyle = paleta.value;
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14);
            pincel.fill();
        }

        if (evento.shiftKey && evento.altKey) {

           alert('Por favor, uma tecla apertada por vez.')

        } else if (evento.shiftKey && raio + 10 <= 20){

            raio = raio + 10;

        } else if (evento.altKey && raio - 5 >= 10) {

            raio = raio - 5;
        }

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

    }

    /código que quero resumir/
    tela.onmousemove = desenhaCirculo;

    function habilitaDesenhar() {

        arrastar = true;
    }

    function desabilitaDesenhar() {

        arrastar = false;
    }

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

</script>
2 respostas
solução!
por Victor Costa Santos
| 1923.4k xp | 3690 posts
Alura Scuba Team Monitor de ForumOps

Olá Vinícius, tudo bem? Espero que sim

Peço desculpas pela demora em obter um retorno.

Mas vamos lá, para resolvermos a primeira questão sobre a mudança do fundo da tela, sua lógica estava no caminho, só dei seguimento à mesma.

Vamos criar outra tag<canvas>, como se fosse a tela de um quadro e depois vamos criar outra área para pintura, afinal o nosso fundo muda de cor e caso não fosse criado outro canvas a mudança do mesmo iria fazer com que cobrisse a área já pintada pelo usuário.

Portanto:

<!-- área de pintura do pincel -->
<canvas style="position:absolute;" width="600" height="400"></canvas>

<!-- fundo da tela -->
<canvas id="fundo" width="600" height="400"></canvas>

Percebe-se que utilizei do position:absolute ela faz parte do mundo CSS e fica responsável por colocar um elemento por cima do outro, ou seja, em posição absoluta para funcionar como esperado. Vinicius, caso queira saber mais sobre esse mundo, ao final deixo a recomendação para a formação que vai englobar HTML e CSS.

E daremos um id para diferenciar um canvas do outro, nesse caso eu usei id = “fundo”. obs: Id é um identificador único para um elemento.

depois vamos diferenciar os ìnputs.

 <!-- entrada para escolher a cor da tela -->
Escolha a cor da tela <input id="tela" type="color" name="corDaTela">

Logo depois vamos dar início as variáveis responsáveis por receber os valores e determinar o tamanho da área que será pintada, dentro do <script> vamos criar as variáveis.

Seguindo a mesma lógica já criada por ti na primeira tela, ficando assim:

//tela 2
    var telaFundo = document.getElementById('fundo')

    var pincel2 = telaFundo.getContext('2d')
    var paleta2 = document.getElementById('tela');

Depois é necessário criar uma função que faz tudo funcionar de fato, sendo assim temos:

function pintaTela(){
        pincel2.fillStyle = paleta2.value;
        pincel2.fillRect(0, 0, 600, 400);
    }

Para finalizar, basta chamar a função, ao final do script.

tela.onmouseover = pintaTela;

OBS: O evento onmouseover ocorre quando o ponteiro do mouse é movido para um elemento ou para um de seus filhos.

parte 2:

Não há muito o que ser resumido, afinal as funções são bem curtas. Os próximos passos talvez sejam mais complexos, mas não se preocupe, é bem tranquilo de entender. Fica assim:

  var habilitaDesenhar = () => arrastar = true;
    var desabilitaDesenhar = () => arrastar = false

    tela.onmousedown = habilitaDesenhar;
    tela.onmouseup = desabilitaDesenhar;
    tela.onmouseover = pintaTela;

Utilizei uma arrow, uma expressão arrow function possui uma sintaxe mais curta melhorando a legibilidade em resumo, caso seja de seu interesse, fica a documentação.

Resultado:

O gif a seguir apresenta o resultado , foi desenhado sobre o canvas uma tela de um fundo preto que logo é trocado para a cor verde, sobre esse fundo está escrito a palavra “vlw!” uma forma de agradecimento ao aluno Vinicius por enviar a pergunta em tonalisa rosa, o gif continua e demonstra a roca da cor de fundo para um tom em roxo, o gif fica em loop

Seu código completo se encontra no meu GitHub por conta da limitação de caracteres aqui no fórum.

Deixo aqui a formação citada anteriormente para saber mais sobre CSS e HTML.

Parabéns pelo seu esforço em aprender e melhorar suas capacidades cada vez mais, espero que com essa resposta eu tenha te ajudado de alguma forma. Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Vinícius Guimarães Santos
| 53k xp | 7 posts

Victor, muito obrigado, era exatamente isso que eu estava pensando, apliquei o que você me ensinou passo a passo e não estava funcionando a principio, mas lendo e relendo o código percebi que havia errado um único digito que quebrava o código completamente, haha acho que isso deve ser normal, terei mais atenção na próxima, novamente agradeço bastante apesar da demora.