javascript - 当用户将鼠标悬停在 Canvas 上时创建动画

Question

当用户将鼠标悬停在 Canvas 上时，我尝试添加图像并为它们设置动画，一旦他们将鼠标移离 Canvas ，我想停止出现新图像。

为了实现这一目标，我尝试在新图像上设置一个间隔，每 100 毫秒触发一次，然后如果用户将鼠标移离 Canvas ，则该函数应该停止触发。

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