如何将文本设置为画布圈

Question

我使用this question并创建了this这样的形状，但现在我不知道如何在第一次点击时为每个圆圈设置文字？ （如tic tac toe）

Answer 1

你走了！ - 我把它合并起来很方便。只需点击圈子即可查看其中的文字。

＆＃13;

＆＃13;

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 70;
var lineWidth = 5;
var cols = 3;
var rows = 2;
var distance = 50;
var circles = [];

//click circle to write
canvas.onclick = function(e) {
    // correct mouse coordinates:
    var rect = canvas.getBoundingClientRect(),  // make x/y relative to canvas
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, circle;

    // check which circle:
    while(circle = circles[i++]) {
        context.beginPath();  // we build a path to check with, but not to draw
        context.arc(circle.x, circle.y, circle.radius, 0, 2*Math.PI);
        if (context.isPointInPath(x, y) && !circle.clicked) {
          circle.clicked = true;
          context.fillStyle = "blue";
          context.font = "bold 34px Arial";
          context.textAlign="center";
          context.fillText("Yeah", circle.x, circle.y);
          
            break;
        }
    }
};


//draw circles
for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        // Draw circle
        var offset = radius * 2 + lineWidth + distance;
        var center = radius + lineWidth;
        var x = j * offset + center;
        var y = i * offset + center;
            
            circles.push({
        id: i + "," + j,    // some ID
        x: x,
        y: y,
        radius: radius,
        clicked:false
    });
        console.log(circles)
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = lineWidth;
        context.strokeStyle = '#003300';
        
        if (j != cols - 1) {
            // Draw horizontal line
            var hLineX = x + radius;
            var hLineY = y;
            context.moveTo(hLineX, hLineY);
            context.lineTo(hLineX + distance + lineWidth, hLineY);
        }
        if (i > 0) {
            // Draw vertical line
            var vLineY = y - radius - distance - lineWidth;
            context.moveTo(x, vLineY);
            context.lineTo(x, vLineY + distance + lineWidth);
        }
        context.stroke();
    }
}

＆＃13;

<div id="ways" style="width:1000px;margin:0 auto;height:100%;">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

快乐帮助！