Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

shiftKey e ctrlKey com problemas.

Bom estava tudo normal, depois que fui usar função anonima acabei mexendo em algo que não prestei atenção ou deixei de mexer talvez, agora quando vou rodar o programa o shiftKey transforma o tamanho do "arc" direto no maximo possivel ou menor possivel, antes não estava assim.

Além disso o botão "INSERIR CÓDIGO" parou de funcionar quando você clica em TIRAR DUVIDA.

Codigo:

3 respostas
<canvas width="640"  height="420"></canvas>


<script>
    // cria uma variavel = puxa o documento canvas do mundo html
    // canvas = tela de desenho
    var screen = document.querySelector('canvas');
    // cria uma variavel que puxa elementos 2d, como circulo, quadrado, retangulo...
    var brush = screen.getContext('2d');
    // codigo que define cor de uma variavel (brush no caso)
    brush.fillStyle = 'grey';
    //variavel que define a pos(x, y, width, height) de um retangulo (rect)
    brush.fillRect(0, 0, 600, 400);
    //variavel de cores disponiveis
    var color = ['blue', 'red', 'green'];
    //variavel que mostra o inicio das cores disponiveis, 0 = primeiro em array
    var currentColor = 0;
    //draw = false, só desenha se algum codigo mudar para true
    var draw = false;
    //arco do circulo inicial
    var arc = 10;

    //função do circulo
    screen.onmousemove = function (event) {
        // faz com que o navegador reconheça o seu mouse
        //                    faz reconhecer o x,y apenas do canvas.
        var x = event.pageX - screen.offsetLeft;
        var y = event.pageY - screen.offsetTop;

        //oncontextmenu = botão direito
        screen.oncontextmenu = changeColor;


        console.log(event);
        // if shift = aumenta o arco do circulo, if ctrl = diminui
        // if shift+ctrl = alerta de aderencia
        if (event.shiftKey && event.ctrlKey) {

            alert('Só aperte uma tecla por vez, por favor!');

            } else if(event.shiftKey && arc + 5 <= 40) {
                arc = arc + 5;

            } else if(event.ctrlKey && arc - 5 >= 5) {
                   arc = arc - 5;

            }

        //função atribuida direta em um comando.
        screen.onmousedown = function() {

            draw = true;
        }

        screen.onmouseup = function() {

            draw = false;
        }    


        //se draw = true, exerce comando de pintar
         if(draw) {
            brush.fillStyle = color[currentColor];
            brush.beginPath();
            brush.arc(x, y, arc, 0, 2*Math.PI);
            brush.fill();
        }
        /*
        //reconhecer movimento do mouse na screen do canvas
        screen.onmousemove = showCircle;
        porém ela se tornou inutil quando atrelei ela a função showCircle que agora é anonima.
        */
    }


    //trocar cor puxando array do Color
    function changeColor() {

        currentColor++;

            if(currentColor >= color.length){
                currentColor = 0

            }

        return false;

    }




</script>

Eu acho que ta faltando algo que reconheça apenas o pressionar do botão porque acho que ele não está reconhendo o botão quando e pressionado e solto

solução!

Olá Marcelo,

como os ifs que verificam o o evento de shift e ctrl estão direto no comportamento do onmousemove, só de vc apertar a tecla e simplesmente mover o mouse ele já está aumentando o arc do pincel. Quando você gostaria de aumentar o seu tamanho?

Se for apenas quando o usuário pressiona o botão do mouse, você pode mover toda aquela estrutura do if para dentro da função do screen.onmousedown, por exemplo.