Question

我基本上想创建一个按钮，每当我点击它时执行该功能，就像这个例子http://billmill.org/static/canvastutorial/move.html这里如果点击“运行代码”按钮，该功能从头开始执行，但是当我试图使用“onclick”或“evenlistener”时，我的功能将不会重启，而是加速而不是从中心重新运行，我必须刷新我的页面。

这是我试过的一个例子，没有成功，请帮忙！

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

和脚本，init()只是画布的一个功能

var btn = document.getElementById("clickme");

btn.addEventListener("click", function() {
init(); 
});

Answer 1

这是因为调用init函数setInterval内部每隔10ms调用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();

我希望这会有所帮助。

创建一个重新运行JavaScript for canvas的按钮

1 个答案: