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

Question

how can I fill the "new" canvas circle that appears next to the older one. There is no problem with rectangle for example:

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

What I want to do? I'm creating animation in canvas where random-sized-color circle will appear and it will move in a specified direction. The new canvas layaer will appear in the next frame (fps) with a new(old) circle.

 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

The fillRect() will fill directly to the canvas without going via a path (versus for example rect() ).

The arc() on the other hand will add to a path which needs to be filled later. It also require the path to be cleared in-between the calls using beginPath() .

A simple way to think about it is to wrap the necessary code into a function that acts like 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
}

In action:

 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> 

If you are bold you can also add the method to the context itself before calling getContext() :

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

The use it like any other method:

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>