Question

我想创建一个简单的页面，从中心 ad infinitum 中增加圆圈。我几乎就在那里，但我无法弄清楚如何重复生长它们（以某个间隔将半径i重置为0并再次调用该函数）。我认为它需要一个闭包和一些递归，但我无法弄明白。

＆＃13;

// Initialize canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.getElementsByTagName('body')[0].appendChild(canvas);

// Grow a circle
var i = 0;
var draw = function() {
  ctx.fillStyle = '#000';
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, i, 0, 2 * Math.PI);
  ctx.fill();
  i += 4;
  window.requestAnimationFrame(draw);
}
draw();

＆＃13;

Answer 1

我要做的两件事......

首先，修改绘图功能，以便圆圈达到一定大小时，i变量将重置为零。这又开始了圈子。

其次，添加一个setInterval计时器以在某个时间间隔调用绘制函数。有关详细信息，请参阅http://www.w3schools.com/js/js_timing.asp。

此设置将导致定期调用draw（），并将i重置为零使其重复。

Answer 2

所以这确实需要关闭。我们将初始函数包装在一个闭包中，并调用它的包装函数，它在每次调用时重新初始化我。 draw()增长一个圈子，drawIt()()开始一个新圈子。

＆＃13;

var drawIt = function(color) {
    var i = 0;
    return function draw() {
      ctx.fillStyle = color;
      ctx.beginPath();
      ctx.arc(canvas.width/2, canvas.height/2, i, 0, 2 * Math.PI);
      ctx.fill();
      i+=1*growthFactor;
      // Growing circles until they are huge
      if (i < canvas.width) {
        window.requestAnimationFrame(draw);
        if (i === spacing) {
          circles++
          drawIt(nextColor())();
        }
      }
    }
  };
  drawIt(nextColor())();
})();

＆＃13;

使用JS和Canvas增长无限圈

2 个答案: