Javascript 如何暂停动画_Javascript_Html

Javascript 如何暂停动画

javascript html

Javascript 如何暂停动画,javascript,html,Javascript,Html,我让这个图像在画布上移动，但是没有一种方法可以阻止它移动。我使用setInterval进行移动，然后使用clearInterval清除间隔以停止运动，但似乎它不起作用 <html> <head> <script type="application/javascript"> var ctx = null; var x_icon = 0; var y_icon = 0; var stepX = 1;

我让这个图像在画布上移动，但是没有一种方法可以阻止它移动。我使用setInterval进行移动，然后使用clearInterval清除间隔以停止运动，但似乎它不起作用

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


var-ctx=null；
var x_图标=0；
变量y_图标=0；
var-stepX=1；
var-stepY=1；
变量大小x=221；
变量大小_y=184；
var canvas_size_x=800；
变量画布大小y=600；
var anim_img=null；
函数绘图（）{
var canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
anim\u img=新图像（大小x，大小y）；
anim_img.onload=function（）{
var myvar=setInterval（myAnimation，10）；
函数stopMove（）{
净距（myVar）；
}
}
anim_img.src='image/download.jpg'；
}
函数myAnimation（）{
clearRect（0，0，画布大小x，画布大小y）；
如果（x|u图标<0 | | x|u图标>画布大小x-大小x）{stepX=-stepX；}
如果（y|u图标<0 | | y|u图标>画布大小y-大小y）{stepY=-stepY；}
x_图标+=步骤x；
y_图标+=stepY；
ctx.drawImage（动画图像、x图标、y图标）；
}
停止

我希望在单击停止按钮时停止download.jpg的运动，但它不起作用，正如@Snel23所说，您需要将

stopMove（）

和

myvar

从

draw（）

上下文中取出

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

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

var ctx=null；
var x_图标=0；
变量y_图标=0；
var-stepX=1；
var-stepY=1；
变量大小x=221；
变量大小_y=184；
var canvas_size_x=800；
变量画布大小y=600；
var anim_img=null；
var myvar=null；//将间隔控制柄移到绘图外（）
函数绘图（）{
var canvas=document.getElementById（“canvas”）；
ctx=canvas.getContext（“2d”）；
anim\u img=新图像（大小x，大小y）；
anim_img.onload=函数（）
{ 
myvar=setInterval（myAnimation，10）；
}
anim_img.src='image/download.jpg'；
}
函数stopMove（）{
净距（myVar）；
}
函数myAnimation（）{
clearRect（0，0，画布大小x，画布大小y）；
如果（x|u图标<0 | | x|u图标>画布大小x-大小x）{stepX=-stepX；}
如果（y|u图标<0 | | y|u图标>画布大小y-大小y）{stepY=-stepY；}
x_图标+=步骤x；
y_图标+=stepY；
ctx.drawImage（动画图像、x图标、y图标）；
}

如果在代码的顶层（函数之外）声明间隔（称为

myVar

），并将嵌套函数移出顶层，则可以根据需要访问这两个间隔，例如：

//定义全局标识符
让
ctx=null，
x_图标=0，
y_图标=0，
stepX=1，
stepY=1，
尺寸_x=260，
尺寸_y=175，
画布大小=400，
画布大小y=180，
anim_img=null，
间隔=空；//`interval`是一个全局变量
常数
canvas=document.getElementById（“canvas”），
button=document.getElementById（“按钮”）；
//当用户单击按钮时调用“停止”
按钮。addEventListener（“单击”，停止）；
//立即调用'draw'以呈现初始画布
draw（）；
函数绘图（）{
ctx=canvas.getContext（“2d”）；
anim\u img=新图像（大小x，大小y）；
anim_img.onload=函数（）{
//反复调用“animate”，直到清除“interval”
间隔=设置间隔（动画，30）；
}
anim_img.src=https://www.logomaker.com/wp-content/uploads/2018/12/education1.png';
}
函数停止（）{
间隔时间；
}
函数animate（）{
//在画布上的不同位置重新绘制图像
clearRect（0，0，画布大小x，画布大小y）；
如果（x|u图标<0 | | x|u图标>画布大小x-大小x）{stepX*=-1；}
如果（y|u图标<0 | | y|u图标>画布大小y-大小y）{stepY*=-1；}
x_图标+=步骤x；
y_图标+=stepY；
ctx.drawImage（动画图像、x图标、y图标）；
}


STOP

这是因为

stopMove（）

仅存在于

draw（）

的上下文中，而不存在于全局命名空间中，因此无法找到