Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

nao tem como fazer dessa forma?

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    var cores = ['blue', 'yellow', 'green'];
    var coresid= 0;
    var raio = 10

    function desenhaCirculo(evento) {

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


        if(evento.shiftKey && evento.altKey){
            else if(evento.shiftKey && raio<=40){
                raio = raio+10

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

        }

        pincel.fillStyle = cores[coresid];
        pincel.beginPath();
        pincel.arc(x, y,raio, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        coresid++;

        if(coresid>=cores.length){
            coresid= 0
        }
        return false;
    }

    tela.oncontextmenu = mudaCor;
1 resposta
solução!

Vou dar a minha opinião aqui: Não da pra fazer dessa forma por causa dessa parte do código:

if(evento.shiftKey && evento.altKey){
            else if(evento.shiftKey && raio<=40){
                raio = raio+10

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

Mais especificamente na primeira linha você inseriu && que significaria um "e" ou "and", então lendo ficaria algo como: " SE ( 'tecla shift ativada' E 'tecla alt ativada') fazer isso...", mas a ideia não é pressionar as duas teclas ao mesmo tempo para chamar o if , e sim uma delas para cada tecla, então teria que ter utilizado || que significa "ou" ou "or". Logo em seguida na mesma citação, encontrei outro "erro" você inseriu else if antes mesmo de usar um if na indentação da instrução em questão. Tente seguir uma estrutura que comece com um únicoif, se precisar de mais cláusulas ai então segue com os else if Eu não quero me aprofundar muito porque também não sei o suficiente pra te explicar em detalhes, mas quis tentar... aqui em baixo vou colocar como eu acho que deveria ser o código, eu só mudei aquela parte citada mesmo!

<meta charset="UTF-8">

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    var cores = ['blue', 'yellow', 'green'];
    var coresid= 0;
    var raio = 10

    function desenhaCirculo(evento) {

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


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

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

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

        }

        pincel.fillStyle = cores[coresid];
        pincel.beginPath();
        pincel.arc(x, y,raio, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    }

    tela.onclick = desenhaCirculo;

    function mudaCor() {

        coresid++;

        if(coresid>=cores.length){
            coresid= 0
        }
        return false;
    }

    tela.oncontextmenu = mudaCor;
</script>

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software