Question

我使此图像在画布上移动，但没有一种方法阻止它移动。我使setInterval进行移动，并稍后通过clearInterval清除Interval以停止运动，但似乎不起作用< / p>

<html>
  <head>
    <script type="application/javascript">
      var ctx = null;
      var x_icon = 0;
      var y_icon = 0;
      var stepX = 1;
      var stepY = 1;
      var size_x = 221;
      var size_y = 184;
      var canvas_size_x = 800;
      var canvas_size_y = 600;
      var anim_img = null;



      function draw() {
        var canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        anim_img = new Image(size_x, size_y);
        anim_img.onload = function() { 
            var myvar = setInterval(myAnimation, 10); 
            function stopMove() {
                clearInterval(myVar);
            }

        }
        anim_img.src = 'image/download.jpg';
      }

      function myAnimation() {
        ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
       if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
       if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
          x_icon += stepX;
          y_icon += stepY;
       ctx.drawImage(anim_img, x_icon, y_icon);
      }



    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="800" height="600" style="border:solid 1px;"></canvas>
    <button onmousedown="stopMove()">STOP</button>
  </body>
</html>

我希望在单击“停止”按钮时停止download.jpg的运动，但是它不起作用

Answer 1

就像@ Snel23所说，您需要从stopMove()上下文中取出myvar和draw()。

  var ctx = null;
  var x_icon = 0;
  var y_icon = 0;
  var stepX = 1;
  var stepY = 1;
  var size_x = 221;
  var size_y = 184;
  var canvas_size_x = 800;
  var canvas_size_y = 600;
  var anim_img = null;
  var myvar = null; // moving interval handle outside draw()



  function draw() {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    anim_img = new Image(size_x, size_y);
    anim_img.onload = function() 
    { 
        myvar = setInterval(myAnimation, 10);  
    }
    anim_img.src = 'image/download.jpg';
  }
  function stopMove() {
      clearInterval(myVar);
  }


  function myAnimation() {
    ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
   if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
   if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
      x_icon += stepX;
      y_icon += stepY;
   ctx.drawImage(anim_img, x_icon, y_icon);
  }

Answer 2

如果您在代码的顶层（在函数之外）声明间隔（称为myVar），并且还将嵌套函数移到顶层，则可以按以下方式访问它们需要，例如：

// Defines global identifiers
let
  ctx = null,
  x_icon = 0,
  y_icon = 0,
  stepX = 1,
  stepY = 1,
  size_x = 260,
  size_y = 175,
  canvas_size_x = 400,
  canvas_size_y = 180,
  anim_img = null,
  interval = null; // `interval` is a global variable

const
  canvas = document.getElementById("canvas"),
  button = document.getElementById("button");

// Calls `stop` when the user clicks the button
button.addEventListener("click", stop);

// Calls `draw` immediately to render the initial canvas
draw();


function draw() {
  ctx = canvas.getContext("2d");
  anim_img = new Image(size_x, size_y);
  anim_img.onload = function() {
    // Calls `animate` repeatedly until `interval` is cleared
    interval = setInterval(animate, 30);
  }
  anim_img.src = 'https://www.logomaker.com/wp-content/uploads/2018/12/education1.png';
}

function stop() {
  clearInterval(interval);
}

function animate() {
  // Re-draws the image at different positions on the canvas
  ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
  if (x_icon < 0 || x_icon > canvas_size_x - size_x) { stepX *= -1; }
  if (y_icon < 0 || y_icon > canvas_size_y - size_y) { stepY *= -1; }
  x_icon += stepX;
  y_icon += stepY;
  ctx.drawImage(anim_img, x_icon, y_icon);
}

<canvas id="canvas" width="400" height="180" style="border:solid 1px;"></canvas>
<button id="button">STOP</button>

如何暂停动画

2 个答案: