recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment basculer entre le rouge et le bleu à l'aide de clickEventListener à l'aide de Vanilla JS

Tout d'abord, je crée deux fonctions bleu et rouge.

function drawBlueCircle(){
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(mouse.x,mouse.y,50,0,Math.PI *2)
    ctx.fill();
}

function drawRedCircle(){
    ctx.fillStyle = 'red'
    ctx.beginPath();
    ctx.arc(mouse.x,mouse.y,50,0,Math.PI * 2);
    ctx.fill();
}

Ici, j'utilise l'instruction if dans la boucle For pour créer un clickEventListener

canvas.addEventListener('click',function(event){
    mouse.x = event.x,
    mouse.y = event.y
    
    for(let i=0;i<event.length;i++){
        
        (i%2==0)? drawBlueCircle():drawRedCircle() // here i am trying to alter my clicks using for loops. 
    }
})

Mon erreur est la suivante : Même après avoir cliqué sur la souris, il reste rouge. J'obtiens cette couleur rouge avec d'autres eventListener mousemove mais ce n'est pas le problème.

P.S. : ce n'est pas le code complet. Je n'ai donné que celui que je n'ai pas pu résoudre (ci-dessus).

J'ai essayé le code ci-dessus mais je n'ai pas pu changer la couleur.

P粉523625080P粉523625080231 Il y a quelques jours481

répondre à tous(2)je répondrai

  • P粉068486220

    P粉0684862202024-04-04 09:48:41

    L'option la plus simple consiste à utiliser une variable booléenne pour stocker la couleur souhaitée, puis à l'inverser à chaque clic :

    function drawBlueCircle() {
      console.log('drawBlueCircle called')
    }
    
    function drawRedCircle() {
      console.log('drawRedCircle called')
    }
    
    // This variable tracks which color we are up to
    let isBlue = true
    
    // Added the listener to 'window' for the sake of the example
    window.addEventListener('click', function(event) {
      // Run the expected function
      if (isBlue) {
        drawBlueCircle()
      } else {
        drawRedCircle()
      }
      
      // Invert the next color
      isBlue = !isBlue
    })
    Click anywhere

    répondre
    0
  • P粉790819727

    P粉7908197272024-04-04 00:09:03

    Vous devez conserver une référence à la prochaine couleur à dessiner au lieu d'utiliser une boucle. De plus, si vous transmettez la couleur (ainsi que le contexte et l'événement) comme argument de fonction, vous pouvez simplifier la fonction en une seule : drawCircle et utiliser cette couleur pour déterminer la couleur de remplissage du cercle.

    // Pass in the context, event, and colour to the
    // function so you can use them
    function drawCircle(ctx, event, color) {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(event.x, event.y, 50, 0, Math.PI *2);
      ctx.fill();
    }
    
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    
    // Initialise the color
    let color = 'red';
    
    canvas.addEventListener('click', event => {
      
      // Draw a circle with the current colour
      drawCircle(ctx, event, color);
    
      // Switch the color
      color = color === 'red' ? 'blue' : 'red';
    });

    répondre
    0
  • Annulerrépondre