创建一个按钮，用于为画布重新运行JavaScript

我基本上想创建一个按钮，每当我点击它时，它就会执行这个函数，就像这里的例子，如果你点击“运行代码”按钮，这个函数就会从一开始执行，但是当我尝试使用“onclick”或“evenlister”时，我的函数不会重新启动，而是会加速，不会从中心重新运行，我必须刷新我的页面

下面是一个我试过的例子，效果不好，请帮忙

<input type="button" value="click" id="clickme">

---

这是因为正在调用

init

函数

setInterval

中的

draw

函数，该函数每10毫秒调用一次

draw

函数，因此如果您多次单击该按钮，您将设置多个间隔，所有这些间隔都调用

draw

函数，而不重置任何间隔

x

和

y

在

draw

中增加，因此如果更频繁地调用

draw

，动画将加速。如果要在

init

上重置动画，则必须重置x和y的值并清除现有间隔

像这样：

var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
var intervalId;
var ctx;

function init() { 
  ctx = $('#canvas')[0].getContext("2d");
  if(intervalId) {
    clearInterval(intervalId);
    x = 150;
    y = 150;
  } 
  intervalId = setInterval(draw, 10);
  return intervalId;
}

function draw() {
  ctx.clearRect(0,0,300,300);
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
  x += dx;
  y += dy;
}

init();

---

我希望这有帮助。

非常感谢！起初我不明白，但你的回答给了我一个想法，解决了问题！非常感谢！

var x = 150;
var y = 150;
var dx = 2;
var dy = 4;
var intervalId;
var ctx;

function init() { 
  ctx = $('#canvas')[0].getContext("2d");
  if(intervalId) {
    clearInterval(intervalId);
    x = 150;
    y = 150;
  } 
  intervalId = setInterval(draw, 10);
  return intervalId;
}

function draw() {
  ctx.clearRect(0,0,300,300);
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
  x += dx;
  y += dy;
}

init();