当用户在画布上悬停时创建动画

Question

当用户在画布上悬停时，我试图添加图像和动画，一旦用户将鼠标移出画布，我想阻止新的图像出现。

为了实现这一点，我尝试在新图像上设置一个间隔，以每100 an触发一次，然后如果用户将鼠标移出画布，则此函数将停止触发。

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