Animation erstellen, während der Benutzer über den Bildschirm schwebt

Question

Ich versuche, Bilder hinzuzufügen und zu animieren, wenn sich ein Benutzer auf der Zeichenfläche befindet. Sobald sie die Maus von der Zeichenfläche entfernen, möchte ich keine neuen Bilder mehr anzeigen.

Um dies zu erreichen, habe ich versucht, ein Intervall auf dem neuen Bild zu setzen, um alle 100ms auszulösen und wenn der Benutzer die Maus aus der Leinwand bewegt, sollte diese Funktion nicht mehr auslösen.

canvas.addEventListener("mouseover", setInterval(newImage, 100), false); 
canvas.addEventListener("mouseout", clearInterval(newImage), false); 

JS Code unten

//gets canvas element 
 
    var canvas = document.getElementById('canvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 

 
    function newImage() { 
 

 
    //random position on the canvas 
 
    var randomPosition = parseInt(Math.random() * window.innerWidth); 
 

 
    var images = [ 
 
     'http://www.convoy.me/image/landing/Scratcher.png', 
 
     'http://www.convoy.me/image/landing/push_harder_0006.png' 
 
    ]; 
 

 
    var y = window.innerHeight; 
 

 
    //selects a random image 
 
    var randomImage = parseInt(Math.random() * images.length); 
 

 
    //IIFE draw 
 
    (function draw() { 
 
     var imageObj = new Image(); 
 
     imageObj.onload = function() { 
 

 
     ctx.clearRect(randomPosition - imageObj.width, y, imageObj.width, imageObj.height); 
 

 
     y -= 10; 
 

 
     ctx.drawImage(imageObj, randomPosition - imageObj.width, y, imageObj.width, imageObj.height); 
 

 
     if (y > -imageObj.height) { 
 
      requestAnimationFrame(draw) 
 
     } 
 
     }; 
 
     imageObj.src = images[randomImage]; 
 
    })(); 
 
    } 
 

 
    canvas.addEventListener("mouseover", setInterval(newImage, 100), false); 
 
    canvas.addEventListener("mouseout", clearInterval(newImage), false);

<canvas id="canvas"></canvas>

Answer 1

Ich nehme an, das Problem ist, dass das Intervall löscht nie. Sie müssen das Intervall zu einer Variablen zugewiesen werden und das Intervall dann durch Variablennamen löschen:

var newImageInterval; 

canvas.addEventListener("mouseover", function(){ 
    newImageInterval = setInterval(newImage, 100); 
}, false); 
canvas.addEventListener("mouseout", function(){ 
    clearInterval(newImageInterval); 
}, false);