さまざまなサイズの円を中央に揃える方法は？

Question

Iは、例えば、中央線に円の異なる大きさを揃えたい：

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>

を使用して次の各円を描きます