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

Question

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.

Answer 1

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

Answer 2

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';
});