JavaScript动画粘滞圆

在我的画布动画中，我遇到了一个问题，我的圆圈在没有从画布上提起隐喻笔的情况下被画出来

我需要一种方法来停止函数，只画一个圆而不是另一个圆

这里是我的警告：使用一个逻辑处理器核心/线程的100%

JavaScript:

---

然后使用一个条件停止递归调用，或者从代码中省略size++和size_two++。

您的函数没有完整圆的所有信息，因此这两个圆之间的线。下面将画两个圆圈，中间没有线

function start(){
  requestAnimationFrame(start);
  size++;

  context.beginPath();
  context.arc(95, 85, size, 0, 2*Math.PI);
  context.closePath();
  context.fill();
}

function othercircle(){
  requestAnimationFrame(othercircle);
  size_two++; 

  context.beginPath();
  context.arc(500, 300, size_two, 0, 3*Math.PI);
  context.closePath();
  context.fill();
}

以下是最新的

我认为在您的情况下，go object更简单：定义一个Circle类，该类将随时间更新并绘制自身：

/// Circle class.
//  has update(dt) and draw as public method.
function Circle(x, y, initSize, endSize, duration, color) {
    this.x = x;
    this.y = y;
    this.size = initSize;
    this.endSize = endSize;
    this.color = color;
    this.speed = (endSize - initSize) / duration;
    this.update = function (dt) {
        if (this.speed == 0) return;
        this.size += dt * this.speed;
        if (this.size > this.endSize) {
            this.size = this.endSize;
            this.speed = 0;
        }
    }
    this.draw = function () {
        context.beginPath();
        context.strokeStyle = this.color;
        context.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        context.stroke();
    }
}

然后将所有动画对象保持在一个数组中

  var scene=[];

并对对象设置动画/绘制：

function animate() {
    // keep alive
    requestAnimationFrame(animate);
    //  handle time
    var callTime = Date.now();
    var dt = callTime - lastTime;
    lastTime = callTime;
    // clear screen
    context.clearRect(0, 0, canvasWidth, canvasHeight);
    context.fillText('Click anywhere !',40, 80);
    // draw
    for (var i = 0; i < scene.length; i++) {
        var thisObject = scene[i];
        thisObject.draw();
    }
    // update
    for (var i = 0; i < scene.length; i++) {
        var thisObject = scene[i];
        thisObject.update(dt);
    }

}
var lastTime = Date.now();

animate();

---

其他答案都很好，但我想强调一下为什么会出现你不想要的线条

你不想要的连接线

创建不需要的连接线是因为必须在绘制每个圆弧之前调用context.beginPath。如果不调用begainPath，浏览器将假定您要连接两个圆路径

context.beginPath()
context.arc(95, 85, size, 0, 2*Math.PI);
context.stroke();

context.beginPath();
context.arc(200, 200, size_two, 0, 3*Math.PI);
context.stroke();

再加几张便条

你的另一个圆正在画一条3*PI的弧。2*PI是一个完整的圆，大于2*PI的任何值都不会添加到圆中

如果您打算绘制一个展开的笔划圆，那么在绘制展开的圆之前，应该在每个动画循环的开始处清除画布

一个requestAnimationFrame就足够了。您可以将圆和其他圆代码放在一个requestAnimationFrame中

示例代码和演示：

---

我很高兴它解决了你的问题。别忘了把这个作为答案。

addEventListener('mousedown', function (e) {
    var x = e.clientX,
        y = e.clientY;
    var color = 'hsl(' + Math.floor(Math.random() * 360) + ',80%, 85%)';
    var newCircle = new Circle(x, y, 20, 100, 1000, color);
    scene.push(newCircle);
});

context.beginPath()
context.arc(95, 85, size, 0, 2*Math.PI);
context.stroke();

context.beginPath();
context.arc(200, 200, size_two, 0, 3*Math.PI);
context.stroke();

var sizeCounter=19;      
var maxSizeCounter=60;
var size = sizeCounter;
var maxSize=40;
var size_two = sizeCounter;
var maxSizeTwo=60;

function start(){

  if(sizeCounter<maxSizeCounter){   requestAnimationFrame(start); }

  // clear the canvas if you want strokes instead of filled circles
  context.clearRect(0,0,canvas.width,canvas.height);

  context.beginPath()
  context.arc(95, 85, size, 0, 2*Math.PI);
  context.stroke();
  if(size<maxSize){ size++; }

  context.beginPath();
  context.arc(200, 200, size_two, 0, 3*Math.PI);
  context.stroke();
  if(size_two<maxSizeTwo){ size_two++; }

  sizeCounter++;

}

start();