Entrar Ainda não tem acesso?
2
respostas

bolinha ou quadradinho

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 Trocando de cor

por carlos ferreira de sousa
| 40.6k xp | 59 posts

olá, eu pensei em um desafio onde ao clicar no botão mudaria de bolinha para quadradinho porque pelo que vi no meu código ao clicar no botão desenho chamaria a função desenhaQuadrado então deixaria de desenhar bolinha para desenhar quadradinho mas eu não entendi porque não esta chamando esta função se alguém souber se é possível e onde estou errando eu agradeço

segue o código;

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

<button> desenho</button>

<script> 



        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "gray"
        pincel.fillRect(0,0,600,400);

    function desenhaQuadrado(evento){

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

        pincel.fillStyle = "green";
        pincel.fillRect (x,y,30,30);

   }

   tela.onclick=desenhaQuadrado;

  function desenhaCirculo (evento){

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    pincel.fillStyle = "blue"
    pincel.beginPath();
    pincel.arc(x,y,10,0,2 * 3.14);
    pincel.fill();
}
tela.onclick = desenhaCirculo;


  var desenho = document.querySelector("button");  
  desenho.onclick = desenhaQuadrado;





</script>
2 respostas
por carlos ferreira de sousa
| 40.6k xp | 59 posts

depois de varias tentativas consegui fazer trocar a bolinha por quadrado clicando no botao desenho, agora preciso fazer retornar a desenhar a bolinha ao clicar em desenho :(

segue o codigo:

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

<button> desenho</button>

<script> 



        var tela = document.querySelector("canvas");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = "gray"
        pincel.fillRect(0,0,600,400);

    function desenhaQuadrado(evento){

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

        pincel.fillStyle = "green";
        pincel.fillRect (x,y,20,20);



        if(desenho.onclick){
            tela.onclick = desenhaQuadrado;
        }


   }

   tela.onclick=desenhaQuadrado;

  function desenhaCirculo (evento){

    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;
    pincel.fillStyle = "blue"
    pincel.beginPath();
    pincel.arc(x,y,10,0,2 * 3.14);
    pincel.fill();
}
tela.onclick = desenhaCirculo;


  var desenho = document.querySelector("button");  
  desenho.onclick = desenhaQuadrado;





</script>
por Igor
| 29.7k xp | 5 posts

Boas, consegui passar do circulo para o quadrado e vice-versa criando uma variavel de incremento e uma funcao para atribuir qual foma desenhar, identico ao exercicio muda cor.

Espero ter ajudado 

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

<button> desenho</button>

<script> 



  var tela = document.querySelector("canvas");
  var pincel = tela.getContext("2d");

  pincel.fillStyle = "gray"
  pincel.fillRect(0,0,600,400);

  function desenhaQuadrado(evento){

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

    pincel.fillStyle = "green";
    pincel.fillRect (x,y,20,20);

  }



  function desenhaCirculo (evento){

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

  }

 var forma = 0;

 function mudaForma(){

    forma++

    if(forma == 1 ){

        tela.onclick = desenhaQuadrado;
    }

    if (forma > 1){

      forma = 0;
      tela.onclick = desenhaCirculo;

    }

 }


  var desenho = document.querySelector("button");  
  desenho.onclick = mudaForma;
  tela.onclick = desenhaCirculo;





</script>