JavaScript 动画粘圈

Question

在我的 Canvas 动画中，我遇到了一个问题，即我的圆圈“没有比喻笔”从 Canvas 上抬起来绘制。

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

这是我的 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

其他答案都很好，但我想强调为什么会出现您不需要的行。

你不需要的连接线

创建不需要的连接线是因为您必须在绘制每个弧之前调用 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 的值都不会添加到圆圈中。

• 如果您打算绘制一个展开的笔触圆，那么您应该在每个动画循环开始时清除 Canvas (在绘制展开的圆之前)。

• 一个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();