キャンバス内の各レンダリングされた要素にIDを追加します。

Question

少し助けが必要です。

キャンバス内の各レンダリングされた要素の内部にテキストを追加するにはどうすればよいですか？ここ

は、私の考えを表現するフィドルです：

 

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

 
var x_width = canvas.width; 
 
var y_height = canvas.height; 
 

 
var dx = 2; 
 
var dy = -2; 
 

 
var ballRadius = 10; 
 

 

 
var data = [ 
 
\t 
 
    \t [1,0.506,0.648], 
 
    [2,0.253,0.433], 
 
    [5,0.339,0.445], 
 
    [7,0.396,0.569], 
 
    [8,0.271,0.583], 
 
    [9,0.307,0.187], 
 
    [10,0.431,0.213], 
 
    [12,0.71,1.045], 
 
    [13,0.2,0.259], 
 
    [14,0.272,0.259], 
 
    [15,0.477,0.379] 
 
    
 
    ]; 
 

 

 
for (var i = 0; i<=data.length-1; i++) { 
 
    var x = x_width*data[i][1]; 
 
    var y = y_height*data[i][2]; 
 
    var id = data[i][0]; 
 
    drawPlayer (id, x,y); 
 
} 
 

 
function drawPlayer(id, x, y) { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
 
    ctx.fillStyle = "#0095DD"; 
 
    ctx.fill(); 
 
    ctx.fillText(id, 0, 0); 
 
    ctx.closePath(); 
 
} 
 

 

 
drawPlayer(); 
 
//setInterval(draw , 100);

#myCanvas { 
 
    border: 1px solid red; 
 
}

<canvas id="myCanvas" width="480" height="320"></canvas> 
 

 

 
<div class="play-btn-hld"> 
 
    <button class="play">Graj</button> 
 
</div>

私は何とか各要素内のテキストを追加することはできますか？理想的には、テキストはdata [i] [0]の番号でなければなりません。出来ますか ？私はそれの周りに私の頭を包むことはできません。

または、古典的なhtmlとcssを使用して同様の効果を作りますか？あなたは、円の位置と同じになるように、テキストのxとy位置を設定する必要が

乾杯

Answer 1

。 さらに、テキストをうまく整列させるために測定します。ここ

あなたが行く：

function drawPlayer(id, x, y) { 
    ctx.beginPath(); 
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2); 
    ctx.fillStyle = "#0095DD"; 
    ctx.fill(); 
    ctx.closePath(); 

    const textWidth = ctx.measureText(id); 
    const textHeight = 12 * 0.5; 
    ctx.font = "12px Arial" 
    ctx.fillStyle = "#fff"; 
    ctx.fillText(id, x-textWidth.width/2, y+textHeight/2); 
}