如何将不同大小的圆圈对齐到中间？

Question

我想圆的不同尺寸对齐到中间线，例如：

1圆：

var c=document.getElementById("myCanvas"); 
 
var ctx=document.getElementById("myCanvas").getContext("2d"); 
 
var r1=Math.random()*50; 
 

 
ctx.beginPath(); 
 
ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); 
 
ctx.arc(c.width/2,c.height/2,r1,0,2*Math.PI); 
 
ctx.fill();

<div> 
 
    <canvas id="myCanvas" width="500" height="100" style="position:absolute;border:1px solid black;"></canvas> 
 
    <div style="position:absolute;width:250px;height:100px;border:1px solid black;"/> 
 
</div>

2圈：

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

 
var r1=Math.random()*50; 
 
var r2=Math.random()*50; 
 

 
ctx.beginPath(); 
 
ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); 
 
ctx.arc(-r2+c.width/2,c.height/2,r1,0,2*Math.PI); 
 
ctx.fill(); 
 

 
ctx.beginPath(); 
 
ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); 
 
ctx.arc(r1+c.width/2,c.height/2,r2,0,2*Math.PI); 
 
ctx.fill();

<div> 
 
    <canvas id="myCanvas" width="500" height="100" style="position:absolute;border:1px solid black;"></canvas> 
 
    <div style="position:absolute;width:250px;height:100px;border:1px solid black;"/> 
 
</div>

3,4，... n圈怎么样？

var r[]=[Math.random()*50,Math.random()*50,...]; 
for(var i=0;i<r.length;i++){ 
    ctx.beginPath(); 
    ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); 
    ctx.arc(???+c.width/2,c.height/2,r[i],0,2*Math.PI); 
    ctx.fill(); 
} 

那是什么一般公式？

Answer 1

您首先需要通过求和所有半径来计算totalRadius。最左边的点将是cavnas.width/2 - totalRadius。然后你只需使用绘制每个圆圈旁左以前

const canvas = document.querySelector('#myCanvas') 
 
const ctx = canvas.getContext("2d") 
 
    
 
const draw = (r, center) => { 
 
    ctx.beginPath() 
 
    ctx.fillStyle="#"+((1<<24)*Math.random()|0).toString(16); 
 
    ctx.arc(center, canvas.height/2, r, 0, 2*Math.PI); 
 
    ctx.fill(); 
 
} 
 

 
const randomR =() => 10 + Math.random()*40 
 

 
const rs = new Array(7).fill().map(randomR) 
 

 
// calculate the very left point 
 
let left = canvas.width/2 - rs.reduce((sum, r) => sum + r) 
 

 
rs.forEach(r => { 
 
    // center will be current left + r 
 
    draw(r, left + r) 
 
    
 
    // next left moved by diameter 
 
    left += 2*r 
 
})

<div> 
 
     <canvas id="myCanvas" width="500" height="100" style="position:absolute;border:1px solid black;"></canvas> 
 
     <div style="position:absolute;width:250px;height:100px;border:1px solid black;"/> 
 
    </div>