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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 })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 :
drawCircleet 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'; });