Question

在我的画布动画中，我遇到了一个问题，即我的圈子被画成“没有隐喻笔”从画布上抬起来。

我需要一种方法来停止这个功能，只需绘制一个圆圈而不是另一个圆圈。

这是我的JSFiddle（警告：使用100％的逻辑处理器核心/线程）。

JavaScript的：

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var size = 19;
var size_two = 19;

function start(){
    requestAnimationFrame(start);
    size++;
    context.arc(95, 85, size, 0, 2*Math.PI);
    context.stroke();
}

function othercircle(){
    requestAnimationFrame(othercircle);
    size_two++; 
    context.arc(500, 300, size_two, 0, 3*Math.PI);
}

start();
othercircle();

Answer 1

然后使用条件停止递归调用，或者只是忽略代码中的size++和size_two++。

Answer 2

您的功能没有完整圆圈的所有信息，因此两个圆圈之间的线条。下面会有两个圆圈，它们之间没有直线。

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

这是更新的jsFiddle

Answer 3

enter image description here

http://jsfiddle.net/gamealchemist/4nQCa/5

我认为在你的情况下去对象更简单：定义一个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();

使用此方案，可以轻松添加/删除对象。例如，在鼠标单击时添加圆圈：

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

Answer 4

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

您不需要的连接线

创建了不需要的连接线，因为在绘制每个弧之前必须调用context.beginPath（）。如果您不打电话给begainPath，浏览器会假定您要连接2个圆圈路径。

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

只需几个笔记

您的othercircle正在绘制一条3 * PI的弧线。 2 * PI是一个完整的圆圈，任何高于2 * PI的值都不会添加到圆圈中。
如果你打算绘制一个扩展的笔画圈，那么你应该在每个动画循环开始时清除画布（在绘制展开的圆圈之前）。
一个requestAnimationFrame就足够了。您可以将circle和othercircle代码放在一个requestAnimationFrame中。

示例代码和演示：http://jsfiddle.net/m1erickson/62mFF/

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

JavaScript动画紧贴圈子

4 个答案: