如何（重新）填充画布中的圆圈 - requestAnimationFrame - HTML，JS

Question

如何填充出现在旧画布旁边的“新”画布圆圈。 例如矩形没有问题：

** ctx.fillStyle = 'rgba('+quadratto.r+','+quadratto.g+','+quadratto.b+',1)';

  quadratto.x += quadratto.speedX;
  quadratto.y += quadratto.speedY;
  quadratto.speedY += quadratto.speedY*(-0.15);
  ctx.fillRect(quadratto.x-quadratto.h/4, quadratto.y-quadratto.h/2, 2, 2);**

我想做什么？ 我正在画布中创建动画，其中会出现随机大小的颜色圆圈，并且 它将向指定方向移动。新的画布层将出现在下一帧 (fps) 中，并带有一个新（旧）圆圈。

var myCanvasPattern = document.createElement('canvas');
myCanvasPattern.width = window.innerWidth;
myCanvasPattern.height = window.innerHeight;
document.body.appendChild(myCanvasPattern);
var ryC = myCanvasPattern.getContext('2d');

function lottery(min, max) {
    return Math.floor(Math.random()*(max-min+1))+min;
}

var allQuadro = [];
var fps = 50;
var lastTime = 0;

animationLoop();
function animationLoop(time){
    requestAnimationFrame( animationLoop );
    if(time-lastTime>=1000/fps){
        lastTime = time;
    
        
        for(var i=0;i<10;i++){ 
            allQuadro.push({
            r : lottery(0, 240),
            g : lottery(0, 240),
            b : lottery(0, 240),
            circleR : lottery(10, 30),
            x : myCanvasPattern.width/2,
            y : myCanvasPattern.height/2,
            speedX : lottery(-1000,1000)/100,
            speedY : lottery(-1000,1000)/100 
            })
            }
ryC.fillStyle = 'rgba(255,255,255,0.2)';
ryC.fill(0,0,myCanvasPattern.width, myCanvasPattern.height); 

    for(var i=0; i<allQuadro.length;i++){
        var circle = allQuadro[i];
        ryC.fillStyle  = 'rgba('+circle.r+','+circle.g+','+circle.b+',1)';
       
        circle.x += circle.speedX;
        circle.y += circle.speedY;
        //HERE's THE PROBLEM BELOW. HOW TO CREATE NEW ONE THAT APPEARS NEXT TO PREVIOUS ONE WITH NEW RANDOM COLOR
        ryC.arc(circle.x-circle.circleR/2, circle.y-circle.circleR/2, circleR, 0, 2 * Math.PI);
        //ryC.fill();
    }
    
    
//    ryC.fillStyle = 'rgba('+r+','+g+','+b+',1)';
//ryC.arc(x+speedX, y+speedY, circleR, 0, 2 * Math.PI);
//ryC.fill();
}
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Answer 1

fillRect() 将直接填充到画布而不通过路径（例如 rect()）。

另一方面，arc() 将添加到需要稍后填充的路径。它还需要在调用之间使用beginPath() 清除路径。

一种简单的考虑方法是将必要的代码包装到一个类似fillRect()的函数中：

function fillArc() {
  ctx.beginPath();                 // clear current path
  ctx.arc.apply(ctx, arguments);   // apply arguments to arc() call
  ctx.fill();
  // notice that the arc still exist on the path after this call
  // so to "truly" behave like fillRect() you could consider an
  // additional beginPath() here.. it will depend on your code
}

在行动：

var ctx = c.getContext("2d");

ctx.fillStyle = "#09f";
fillArc(70, 70, 70, 0, 6.28);

ctx.fillStyle = "#0a9";
fillArc(220, 70, 70, 0, 6.28);

function fillArc() {
  ctx.beginPath();
  ctx.arc.apply(ctx, arguments);
  ctx.fill();
}

<canvas id=c></canvas>

如果你是粗体，你也可以在调用getContext()之前将方法添加到上下文本身：

CanvasRenderingContext2D.prototype.fillArc = function() {
  this.beginPath();
  this.arc.apply(this, arguments);
  this.fill();
}

像任何其他方法一样使用它：

ctx.fillArc( ... );

CanvasRenderingContext2D.prototype.fillArc = function() {
  this.beginPath();
  this.arc.apply(this, arguments);
  this.fill();
}

var ctx = c.getContext("2d");

ctx.fillStyle = "#09f";
ctx.fillArc(70, 70, 70, 0, 6.28);

ctx.fillStyle = "#0a9";
ctx.fillArc(220, 70, 70, 0, 6.28);

<canvas id=c></canvas>