円内にテキストを配置するには

Question

画面に50個の円を表示するプログラムを作成しましたが、その中には1〜50の数字がありますが、残りは最初の行にしか表示されません。私は各数字を円の内部に固定しておき、後で数字の1つを呼び出すときにその円と共に表示されるようにしたい。これは私のコードです。私に

var i; 
 
var texts = []; 
 

 
for(i=1;i<=50;i++){ 
 
    texts[i]=i; 
 
} 
 

 
var canvas = document.getElementById('mindMap'); 
 
var ctx = canvas.getContext('2d'); 
 
var w = 50; 
 
var h = 50; 
 
var r = 30; 
 

 
for (var i = 1; i <=texts.length; ++i) { 
 
    ctx.beginPath(); 
 

 
    if((i>=10)&&(i<=20)){ 
 
    ctx.arc(w-630, h+70, r, 0, 2*Math.PI); 
 
    ctx.fillStyle = 'black'; 
 
    ctx.font = '12px Arial'; 
 
    ctx.textAlign = 'center'; 
 
    ctx.fillText(texts[i], w-630, h+70); 
 
    } 
 
    else if((i>=21)&&(i<=31)){ 
 
    ctx.arc(w-1400, h+140, r, 0, 2*Math.PI); 
 
    } 
 
    else if((i>=32)&&(i<=42)){ 
 
    ctx.arc(w-2170, h+222, r, 0, 2*Math.PI); 
 
    } 
 
    else if(i>=43){ 
 
    ctx.arc(w-2940, h+300, r, 0, 2*Math.PI); 
 
    } 
 
    if((i>=1)&&(i<=9)){ 
 
    ctx.arc(w, h, r, 0, 2*Math.PI); 
 
    } 
 
    ctx.fillStyle = '#C0B7EE'; 
 
    ctx.fill(); 
 
    ctx = canvas.getContext('2d'); 
 
    ctx.fillStyle = 'black'; 
 
    ctx.font = '12px Arial'; 
 
    ctx.textAlign = 'center'; 
 
    ctx.fillText(texts[i], w, h); 
 
    w += 70; 
 
}

<canvas id="mindMap" width="800" height="800" style="border:1px solid red"> 
 
    <p>Your browser doesn't support canvas.</p> 
 
</canvas> 
 

Answer 1

w変数は、各行の後にリセットを取得していないかのように表示されます。サークルをスポーンするときは、すでにw-1400で固定しています。あなたはテキストでそれをしたことはありません。 h+=70も必要です。それとも、次の行には行かないでしょう。

Answer 2

私は多くのコードを削除しましたが、あなたの説明はなぜ必要なのかを示していませんでした。それがあなたの望むものでない場合は、目的に関する詳細情報を追加してください。

var canvas = document.getElementById('mindMap'); 
 
var ctx = canvas.getContext('2d'); 
 
ctx.font = '12px Arial'; 
 
ctx.textAlign = 'center'; 
 

 
var w = 50; 
 
var h = 50; 
 
var r = 30; 
 

 
for (var i = 1; i <= 50; ++i) { 
 
    ctx.beginPath(); 
 
    ctx.arc(w, h, r, 0, 2*Math.PI); 
 
    ctx.fillStyle = '#C0B7EE'; 
 
    ctx.fill(); 
 
    
 
    ctx.fillStyle = 'black'; 
 
    ctx.fillText(i, w, h + 5); 
 
    
 
    w += 70; 
 
    if (i % 11 === 0) { 
 
    h += 70; 
 
    w = 50; 
 
    } 
 
}

<canvas id="mindMap" width="800" height="800" style="border:1px solid red"> 
 
    <p>Your browser doesn't support canvas.</p> 
 
</canvas>