當用戶懸停在畫布上時創建動畫

Question

當用戶將鼠標懸停在畫布上時，我試圖添加圖像並為其設置動畫，一旦他們將鼠標移離畫布，我想停止出現新圖像。

為了實現這一點，我嘗試在新圖像上設置一個間隔，每 100 毫秒觸發一次，然后如果用戶將鼠標移離畫布，該函數應該停止觸發。

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

下面的JS代碼

 //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

我認為問題是間隔永遠不會清除。 您需要將區間分配給變量，然后通過變量名稱清除區間：

var newImageInterval;

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