將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來創建類似的效果？

乾杯

Answer 1

需要設置文本的x和y位置是相同圓圈的位置。 加上測量文本，以便它很好地對齊。

在這裏你去：

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